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.

In terms of accessibility, breadcrumbs may be useful for people with a short attention span.

React

Angular

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>

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-icon nj-link--grayed"><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__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 or Angular Fluid component.

<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>

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

Buttons