Skip to main content

Breadcrumb

Information: Documentation incomplete

This component still requires documentation.

Use the breadcrumb component to help users to identify their current location on the website and quickly move between levels.

Example

Open example in a new window
View HTML 
<nav class="uhb-c-breadcrumb" aria-label="breadcrumb">
  <div class="uhb-o-container">
    <ol class="uhb-c-breadcrumb__list">
      <li class="uhb-c-breadcrumb__item">
        <a href="/grandparent-page/" class="uhb-c-breadcrumb__link">Grandparent page</a>
      </li>
      <li class="uhb-c-breadcrumb__item">
        <a href="/grandparent-page/parent-page/" class="uhb-c-breadcrumb__link">Parent page</a>
      </li>
      <li class="uhb-c-breadcrumb__item is-current">
        <a class="uhb-c-breadcrumb__link" href="/grandparent-page/parent-page/current-page" aria-current="page">Current page</a>
      </li>
    </ol>
  </div>
</nav>