Components

Breadcrumb

Breadcrumbs show the user where they currently are within the site navigation and structure. The breadcrumb zone is hidden on smaller devices.

Breadcrumbs should sit directly below the opening <main class="o-layout-main"> tag. They should be title case with spaces between each word, as seen in the page's navigation menu text or page title.

<nav class="c-site-breadcrumb" aria-label="You are here">
  <ol class="c-site-breadcrumb__list">
    <li class="c-site-breadcrumb__list-item"><a href="/">Home</a></li>
    <li class="c-site-breadcrumb__list-item"><a href="#">Top Level</a></li>
    <li class="c-site-breadcrumb__list-item"><a href="#">Second Level</a></li>
    <li class="c-site-breadcrumb__list-item"><a href="#">Third Level</a></li>
    <li class="c-site-breadcrumb__list-item">Current Item</li>
  </ol>
</nav>