Breadcrumbs

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">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">
        <span class="icon fas fa-home me-1" aria-hidden="true"></span><span class="visually-hidden">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="icon fas fa-eye ms-1" aria-hidden="true"></span>
    </li>
  </ol>
</nav>

Resources

• Bootstrap Documentation - Breadcrumb