Breadcrumbs

View Storybook

Breadcrumbs are links used to provide context for the currently-viewed page and where it is located within the overall site structure.

Overview

Breadcrumbs show users where they are within a site’s hierarchy. Breadcrumbs help orient the user and allow for navigation to previous page levels. It can be appropriate to use a breadcrumb when:

The user is many levels of navigation deep
The current page does not have its own navigation
The user needs to quickly go back to the previous parent page

Breadcrumbs should be the first page element—placed directly above the page’s title. All pages that appear in the breadcrumb should link to their respective page. The page the user is on should always be the last page listed and not linked.

When not to use

Breadcrumbs are always treated as secondary and should not entirely replace the primary navigation. They shouldn’t be used for products that have single level navigation because they create unnecessary clutter.

Classes

Class	Applies to	Description
.d-breadcrumbs	N/A	Parent wrapper class for all breadcrumb items.
.d-breadcrumbs__item	N/A	Wrapper for each breadcrumb li element. Adds a decorative separator using the :before pseudo element in CSS.
.d-breadcrumbs__item--selected	.d-breadcrumbs__item	Changes the default styling to a selected state. Used to denote the current location.
.d-breadcrumbs--inverted	.d-breadcrumbs	Inverts all child styles to work on dark backgrounds.

Examples

<nav class="d-breadcrumbs" aria-label="breadcrumb">
  <ol>
    <li class="d-breadcrumbs__item">
      <a href="#" class="d-link d-link--muted">Root</a>
    </li>
    <li class="d-breadcrumbs__item">
      <a href="#" class="d-link d-link--muted">Section</a>
    </li>
    <li class="d-breadcrumbs__item">
      <a href="#" class="d-link d-link--muted">Section</a>
    </li>
    <li class="d-breadcrumbs__item">
      <a href="#" class="d-link d-link--muted">Section</a>
    </li>
    <li class="d-breadcrumbs__item d-breadcrumbs__item--selected">
      <a href="#" class="d-link d-link--muted" aria-current="location">Current Page</a>
    </li>
  </ol>
</nav>
<nav class="d-breadcrumbs d-breadcrumbs--inverted" aria-label="breadcrumb">
  <ol>
    <li class="d-breadcrumbs__item">
      <a href="#" class="d-link d-link--inverted">Root</a>
    </li>
      …
  </ol>
</nav>

Accessibility

HTML doesn't provide dedicated semantic elements for breadcrumbs, so we need to add a few ARIA attributes to make them accessible.

Item	Applies to	Description
nav	.d-breadcrumbs	Use this landmark element to guide screen readers to this navigational unit.
aria-label="breadcrumbs"	.d-breadcrumbs	Applied to the nav landmark element, this provides a description of the navigation unit.
ol	Child of .d-breadcrumbs	This child element of .d-breadcrumbs communicates that breadcrumbs are a structured, navigational hierarchy to screen readers.
aria-current="location"	.d-breadcrumbs__link	Used to denote the current page.