Trail of breadcrumbs

Breadcrumbs help users navigate and understand their location in the website's hierarchy, improving overall user experience.

Breadcrumbs

Breadcrumbs can be included anywhere on a page but will only appear once. Breadcrumbs are based on the application's structure. You can either pass the current structure from the session at any level or pass an empty array. Typestack will automatically retrieve the structure from the session.

Simple setup

Usage

You can make Hans and Gretel proud by including the following code in your website:

Basic usage

With or without structure

You can either let Typestack generate the breadcrumbs with structure, from any level you wish, or without structure.

In both cases we need to pass an array as an argument or else the class will not work.

Without a structure

  <br> // Without an array the function won't return any result <br> $aStructure = array(); <br> <br> // Generate breadcrumbs <br> $sBreadCrumbsHTML = HTMLBreadcrumbs::Generate($aStructure); <br> <br>  

With a structure

  <br> // Get the structure + structure items from cache <br> list($aStructure,$aStructureItems) = Structure::GetStructureFromCache(); <br> <br> // Generate breadcrumbs <br> $sBreadCrumbsHTML = HTMLBreadcrumbs::Generate($aStructure); <br> <br>  

Adding a breadcrumb slide

If we want control over our breadcrumbs, and choose where we want to output them, the simplest way is to create an include slide and point the slide URL to the /shared/breadcrumbs.php file

For some more customization, follow the example below:

Including in an existing slide

In most cases, we only want the breadcrumbs to be outputted once per page. And we also want a wrapper for the breadcrumbs to be positioned and styled in.

  <br> // Check if breadcrumbs already outputted <br> if ((bool)$bOutputBreadcrumbs != true) { <br> <br> // Prepare request (without an array it won't return any result) <br> $aRequest = array(); <br> <br> // Generate breadcrumbs <br> $sBreadCrumbsHTML = HTMLBreadcrumbs::Generate($aRequest); <br> <br> // Generate breadcrumb HTML wrapper for styling <br> $sBreadCrumbsHTML = ' <br> <div class="Shared Breadcrumbs"> <br> <div class="row" style="margin-bottom: 0"> <br> <div class="col s12"> <br> '.$sBreadCrumbsHTML.' <br> </div> <br> </div> <br> </div> <br> '; <br> <br> // Mark breadcrumbs as outputted <br> $bOutputBreadcrumbs = true; <br> } <br> <br> // Output breadcrumbs <br> echo $sBreadCrumbsHTML; <br> <br> <br>  

Result

The result below shows the default implementation of the breadcrumbs

Styling your Breadcrumbs

Our template makes it easy!

Using the template provided, styling your breadcrumbs is quick and easy. Most colours, font sizes, font types, etc. are defined in our central template. Any styling exceptions? No problem. Just edit the .css file and you should be good.

Colours, Backgrounds, Fonts & font sizes

These values are fetched from the main theme using global CSS variables. Variables may be overruled if the styling of the breadcrumbs differ from the main template.

That's it! You now have breadcrumbs in your website.