Bootstrap Breadcrumb

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Examples

Couple of Torus Kit breadcrumb examples that enhances standard ones from Bootstrap.

Overview

This is example of default Bootstrap breadcrumb. Note, that the last item is not clickable as it’s a plain text. You can use .text-muted class to indicate a current (active) page.

<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 text-muted" 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 text-muted" aria-current="page">Data</li>
  </ol>
</nav>
Free

Custom dividers

Torus Kit allows you change the default breadcrumb divider without editing the source files. Just add a data-divider="{html-entity}" with an HTML entity to .breadcrumb-item.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item" data-divider="&#9679;"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page" data-divider="&#9679;"><a href="#">Data</a></li>
  </ol>
</nav>
Free

Styled dividers

There is a couple of predefined style for breadcrumb dividers in Torus Kit. Use any of these to fit into your design by adding .breadcrumb-divider-{style} class.

Chevron divider

Common divider form is a chevron. Add .breadcrumb-dividers-chevron class to .breadcrumb to enable.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dividers-chevron">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>

Bar divider

To style a breadcrumb with vertical bar, add .breadcrumb-dividers-bar class to .breadcrumb.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dividers-bar">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>

Label divider

Label-like style with semi-transparent gradient will fit into any light or dark background. Add .breadcrumb-dividers-label class to .breadcrumb. This style works best with shadows utility.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dividers-label">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb breadcrumb-dividers-label shadow bg-white">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>

Changing the separator with SASS

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

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


It’s also possible to use a base64 embedded SVG icon:

1
$breadcrumb-divider: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0yLjUgMEwxIDEuNSAzLjUgNCAxIDYuNSAyLjUgOGw0LTQtNC00eiIgZmlsbD0iY3VycmVudENvbG9yIi8+PC9zdmc+);


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

1
$breadcrumb-divider: none;
Free

Color variations

Light variation is a default for breadcrumbs. In order to use dark color, you need to add .breadcrumb-dark class to .breadcrumb which changes the text and dividers colors to white.

<!-- Light variation -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb border bg-transparent shadow-sm">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>

<!-- Dark variations -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark breadcrumb-dark">
      <li class="breadcrumb-item"><a href="#" class="breadcrumb-home"></a></li>
      <li class="breadcrumb-item"><a href="#">Library</a></li>
      <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-primary breadcrumb-dark breadcrumb-dividers-chevron">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-danger breadcrumb-dark breadcrumb-dividers-label">
    <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"><a href="#">Data</a></li>
  </ol>
</nav>
Free

With home icon

Sometimes it’s better to indicate home page using icon instead of just a plain text. Here comes a .breadcrumb-home class that has to be added into breadcrumb <a href> link. This icon is included in simple Torus Kit Font so it gets the same color as other breadcrumb items - can be used even on dark background using .breadcrumb-dark.

<!-- Light breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-transparent breadcrumb-dividers-chevron">
    <li class="breadcrumb-item"><a href="#" class="breadcrumb-home"></a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
  </ol>
</nav>

<!-- Dark breadcrumb -->
<nav aria-label="breadcrumb">
  <ol class="breadcrumb bg-dark breadcrumb-dark breadcrumb-dividers-chevron">
    <li class="breadcrumb-item"><a href="#" class="breadcrumb-home"></a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page"><a href="#">Data</a></li>
  </ol>
</nav>

Accessibility

Since breadcrumbs provide a navigation, it’s 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 WAI-ARIA Authoring Practices for the breadcrumb pattern.