Breadcrumbs

Purpose

Breadcrumbs are a secondary navigation method that show content hierarchy or traces someone’s path. They allow a customer to move quickly up to a higher level or to a previous step. Make all links in a breadcrumb selectable except for the page the customer is currently on.

Use breadcrumbs only when the page is nested three or more pages into the journey.

On smaller breakpoints or smaller screen sizes, Breadcrumbs will wrap to a new line.

Example - Breadcrumbs

Copy

<nav id="breadcrumbOneExample" aria-label="Breadcrumb" class="margin-t">
  <ol class="breadcrumb">
    <li aria-current="page" class="link-underlined breadcrumb-item">Home</li>
  </ol>
</nav>

<nav id="breadcrumbTwoExample" aria-label="Breadcrumb" class="margin-t">
  <ol class="breadcrumb">
    <li><a href="#example" class="link-underlined breadcrumb-item"><span>Home</span></a></li>
    <li aria-current="page" class="link-underlined breadcrumb-item">Library</li>
  </ol>
</nav>

<nav id="breadcrumbThreeExample" aria-label="Breadcrumb" class="margin-t">
  <ol class="breadcrumb">
      <li><a href="#example" class="link-underlined breadcrumb-item"><span>Home</span></a></li>
      <li><a href="#example" class="link-underlined breadcrumb-item"><span>Library</span></a></li>
      <li aria-current="page" class="link-underlined breadcrumb-item">Data</li>
  </ol>
</nav>

Example - Long Breadcrumb on Mobile

Copy

<nav id="breadcrumbLongExample" aria-label="Breadcrumb" class="margin-t">
  <ol class="breadcrumb">
    <li><a href="#example" class="link-underlined breadcrumb-item"><span>Breadcrumb 1</span></a></li>
    <li><a href="#example" class="link-underlined breadcrumb-item"><span>Breadcrumb 2</span></a></li>
    <li><a href="#example" class="link-underlined breadcrumb-item"><span>Breadcrumb 3</span></a></li>
    <li aria-current="page" class="link-underlined breadcrumb-item"><span>Breadcrumb 4</span></li>
  </ol>
</nav>