Breadcrumb

Breadcrumbs should be used as soon as you structure information hierarchically. Breadcrumbs provide users with their current location, help them find related content and serve as secondary navigation.

We are undergoing a migration, the following examples might not be up-to-date.

Please refer directly to the Storybook documentation based on your preferred framework.

Storybook documentations

Angular

React

Vanilla

Figma

Example

Separators are automatically added in CSS through ::before and content.

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

<nav aria-label="breadcrumb">
  <ol class="nj-breadcrumb">
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Home</a></li>
    <li class="nj-breadcrumb__item" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="nj-breadcrumb">
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Home</a></li>
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Library</a></li>
    <li class="nj-breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

<nav role="navigation" aria-label="breadcrumb">
  <ol class="nj-breadcrumb">
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Home</a></li>
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Library</a></li>
    <li class="nj-breadcrumb__see-more">
      <button>
        <span class="nj-sr-only">Show hidden items</span>
      </button>
    </li>
    <li class="nj-breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

Icon version

You also have the possibility to add an icon instead of a text for the root link for example.

<nav aria-label="breadcrumb">
  <ol class="nj-breadcrumb">
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed nj-link-icon"><span aria-hidden="true" class="material-icons">home</span></a></li>
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Library</a></li>
    <li class="nj-breadcrumb__item" aria-current="page">Data</li>
  </ol>
</nav>

Minified version

When you have more than 4 items, we recommend that you add a “see more” button. We only provide the layout in Fluid vanilla library. It is automatically added with the React and Angular Fluid component (cf. storybook links above).

<nav aria-label="breadcrumb">
  <ol class="nj-breadcrumb">
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed nj-link-icon"><span aria-hidden="true" class="material-icons">home</span></a></li>
    <li class="nj-breadcrumb__item"><a href="#" class="nj-link nj-link--sm nj-link--grayed">Library</a></li>
    <li class="nj-breadcrumb__see-more">
      <button>
        <span class="nj-sr-only">Show hidden items</span>
      </button>
    </li>
    <li class="nj-breadcrumb__item" aria-current="page">Data</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.

Accessibility resources (WCAG 2.1) :

Badge

Button