Breadcrumb

Improve user navigation experience with breadcrumbs

You can create a breadcrumb element with the breadcrumb class and a single child ul tag. The dividers are created automatically in the content CSS property of the ::before pseudo-element of the li tag.

<nav class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Breadcrumb</a></li>
  </ul>
</nav>
Copy

Controls

Active

The is-active modifier can be used to signify the currently active page.

<nav class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Navigation</a></li>
    <li class="is-active">Breadcrumb</li>
  </ul>
</nav>
Copy

Disabled

The is-disabled modifier can be used to grey out an item in the breadcrumb.

<nav class="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Navigation</a></li>
    <li class="is-disabled">Breadcrumb</li>
  </ul>
</nav>
Copy

Alignment

Center alignment

The has-centered modifier will position all of the items to the center of the breadcrumb list.

<nav class="breadcrumb">
  <ul class="has-centered">
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Breadcrumb</a></li>
  </ul>
</nav>
Copy

Right alignment

The has-end modifier will align the items from right to left.

<nav class="breadcrumb">
  <ul class="has-end">
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Navigation</a></li>
    <li><a href="#">Breadcrumb</a></li>
  </ul>
</nav>
Copy

CSS variables

You can customize the breadcrumb element using the following CSS variables.

.breadcrumb {
  --font-color: var(--color-link);
  --separator-color: var(--color-black);
  --separator-padding: 0 0.625rem;

  --hover-font-color: var(--color-black);
  --disabled-font-color: var(--color-muted);
  --active-font-color: var(--color-black);
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.