Skip to main content

Breadcrumb

Overview

Use the .bsk-breadcrumb class with a list of navigation items to indicate the current page’s location within a hierarchy.

Each navigation item must use an <a> element, except for the last item.

For assistive technologies, all navigation elements should use a role=navigation attribute on an element which wraps around the element using the .bsk-nav class.

Variants

Default breadcrumb

<nav role="navigation">
  <ol class="bsk-breadcrumb">
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 2</a></li>
    <li class="bsk-active"><span class="bsk-sr-only">(current)</span>Level 3</li>
  </ol>
</nav>

States

Active item

Add the .bsk-active class to the drop-down menu item currently active, to highlight where the end user is in the site.

Make sure to include a <span class="bsk-sr-only">(current)</span> element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.

<nav role="navigation">
  <ol class="bsk-breadcrumb">
    <li><a href="#">Level 1</a></li>
    <li><a href="#">Level 2</a></li>
    <li class="bsk-active"><span class="bsk-sr-only">(current)</span>Level 3</li>
  </ol>
</nav>