Breadcrumb

Breadcrumbs are used to help users identify where they are in a sites page hierarchy.

Examples#

To render a breadcrumb, use the class a-breadcrumb.

Base#

<nav class="a-breadcrumb -text" aria-label="Breadcrumb">
  <ol>
      <li class="a-breadcrumb__item">
        <a href="#">Parent</a>
      </li>
      <li class="a-breadcrumb__item">
        <a href="#">Child 1</a>
      </li>
      <li class="a-breadcrumb__item -active">
        <a href="#" aria-current="page">Child 2</a>
      </li>
  </ol>
</nav>

Alternate Separator#

Apply the -alt class to render breadcrumbs with an alternate separator.

<nav class="a-breadcrumb -alt -text" aria-label="Breadcrumb">
  <ol>
      <li class="a-breadcrumb__item">
        <a href="#">Parent</a>
      </li>
      <li class="a-breadcrumb__item">
        <a href="#">Child 1</a>
      </li>
      <li class="a-breadcrumb__item -active">
        <a href="#" aria-current="page">Child 2</a>
      </li>
  </ol>
</nav>

Additional Sizes#

Use text utilities such as -text--small or -text--large to change the size of breadcrumb text.

Large#

<nav class="a-breadcrumb -text--large" aria-label="Breadcrumb">
  <ol>
    <li class="a-breadcrumb__item">
      <a href="#">Parent</a>
    </li>
    <li class="a-breadcrumb__item -active">
      <a href="#" aria-current="page">Child</a>
    </li>
  </ol>
</nav>

Larger#

<nav class="a-breadcrumb -text--larger" aria-label="Breadcrumb">
  <ol>
    <li class="a-breadcrumb__item">
      <a href="#">Parent</a>
    </li>
    <li class="a-breadcrumb__item -active">
      <a href="#" aria-current="page">Child</a>
    </li>
  </ol>
</nav>

Small#

<nav class="a-breadcrumb -text--small" aria-label="Breadcrumb">
  <ol>
    <li class="a-breadcrumb__item">
      <a href="#">Parent</a>
    </li>
    <li class="a-breadcrumb__item -active">
      <a href="#" aria-current="page">Child</a>
    </li>
  </ol>
</nav>

Smaller#

<nav class="a-breadcrumb -text--smaller" aria-label="Breadcrumb">
  <ol>
    <li class="a-breadcrumb__item">
      <a href="#">Parent</a>
    </li>
    <li class="a-breadcrumb__item -active">
      <a href="#" aria-current="page">Child</a>
    </li>
  </ol>
</nav>