Breadcrumb

Example

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Changing the Separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider settings variable in the SCSS. The quote function is needed to generate the quotes around a string, so if you want > as the separator, you can use this:

$breadcrumb-divider: quote(">");

It is also possible to use a base64 embedded SVG icon:

$breadcrumb-divider: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCA4IDgiPgogIDxwYXRoIGQ9Ik0xLjUgMGwtMS41IDEuNSAyLjUgMi41LTIuNSAyLjUgMS41IDEuNSA0LTQtNC00eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSkiIC8+Cjwvc3ZnPg==");

The separator can be removed by setting $breadcrumb-divider to none:

$breadcrumb-divider: none;

Accessibility

Since breadcrumbs provide a navigation, it is a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for the breadcrumb component.

Mixins

No mixins available.