Breadcrumbs

A breadcrumb is a simple way of informing a user of their position on a website.


Example

The idea is to show the user the series of links they went through to end up where they are, and not to create a list of pages. For example, this user went from the 'Home' page, from which they went to the 'Documentation' page, from which they went to the 'Components' page, from which they went to the 'Breadcrumbs' page. Using the breadcrumb, they can see the path they followed, as well as click on a link to return to any of the pages they came from.

Adding breadcrumbs

To add a basic breadcrumb, use the following code:

<div class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Components</a></li>
    <li><p>Breadcrumbs</p></li>
  </ul>
</div>

Here, the <li><a href="#">...</a></li> sections define active links, and the <li><p >...</p></li> define the current page (i.e. a non-active text item). In each case, you must have either the <a> or the <p> tags for proper function.

The '/' separators are added using CSS ::before selectors, so you do not have to add them in your markup.
Magic breadcrumbs are supposed to be neat and simple features, so therefore do not support any colours.

Longer breadcrumbs

For larger sites with a deeper hierarchy, breadcrumbs could get very lengthy. Therefore, breadcrumbs will automatically scroll if the content is too much to fit into a line:

Outside of container

Breadcrumbs, unlike other elements, work well outside of a container:

When placed outside of a container, they are particularly useful at the top of a page (directly below the navbar), so that they are the first thing a user sees.