Breadcrumbs

Breadcrumbs show users where the current page is in relation to other pages on the site.

On this page:

Best Practices

  • Breadcrumbs give the user a way to travel up the information architecture of the digital product.
  • Breadcrumbs are not primary navigation.
  • They are best used for products with multiple levels of information architecture.
  • They are not used to show browsing history.
  • They show the user their current place within the site or app’s hierarchy.
  • The Home icon always goes to the Homepage.
  • On smaller devices, breadcrumbs only display the current page and a link to its parent in the information hierarchy.
  • Place Breadcrumbs immediately above the Page Title.
  • To save space on mobile, only Home, Current, and parent of Current will appear.

Usage

<nav class="breadcrumb-wrapper" aria-label="breadcrumbs" class="breadcrumb-wrapper">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">
        <span class="fas fa-home mr-1" aria-hidden="true"></span><span class="sr-only">Home</span>
      </a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Section</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Section</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Section</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      <span>Current</span><span class="fas fa-eye ml-1" aria-hidden="true"></span>
    </li>
  </ol>
</nav>

Resources

Previous page
Next page