Breadcrumb

Indicate the current page's location within a navigational hierarchy.

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.

Name Type Default Description
$enable-breadcrumb boolean true Enable the generation of the breadcrumb component classes.
$breadcrumb-margin-bottom string 1rem Vertical spacing for breadcrumb.
$breadcrumb-font-size string null Font size for breadcrumb.
$breadcrumb-item-padding-x string .5rem Horizontal spacing for breadcrumb items.
$breadcrumb-active-color string $uibase-700 Text color for active breadcrumb items.
$breadcrumb-divider string quote("/") Breadcrumb divider content.
$breadcrumb-divider-color string $uibase-300 Text color of breadcrumb divider.

Mixins

No mixins available.