Chi · Breadcrumb

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>