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.

Angular

React

Vanilla

Figma

Last updated v5.0.0

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 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></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">Home</a></li>
    <li class="nj-breadcrumb__see-more"><button></button></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"><i class="material-icons">home</i></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></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

Breadcrumb

Example

Icon version

Minified version

Accessibility

Usage

Dos and don’ts

Accessibility

Example(s)