Skip to main content

Breadcrumbs

Purpose

Users need to understand their current location and navigate within a hierarchical navigation scheme.

Description

Breadcrumbs display the current path to a particular page relative to the starting point. Breadcrumbs provide a means for users to understand their current context in a hierarchical structure and the ability to navigate up the structure easily.

  • Breadcrumbs display the current path as links separated by carets to indicate each level.
  • The navigation root is the first element, the current location is the last element
  • The current location is not clickable.
  • Clicking on a link takes you to that screen.

Depending on the complexity of the navigational hierarchy and the type of page or application, it may make sense for the breadcrumb to represent only part of the hierarchy while sub tabs/trees/navigation represent the remaining hierarchy. In that case, you may want to make the far right element clickable.

Default breadcrumb

Example HTML usage: 
<!--Breadcrumbs-->
<nav aria-label="breadcrumb" role="navigation">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">Home</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Library</a>
    </li>
    <li class="breadcrumb-item">
      <a href="#">Long list of item</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Another long list of items
    </li>
  </ol>
</nav>

Wrapping breadcrumb

  1. Home
  2. Library
  3. Long list of item
  4. Another long list of item
Example HTML usage: 
<!--Breadcrumbs-->
<ol class="breadcrumb breadcrumb-wrap">
  <li class="breadcrumb-item">
    <a href="#">Home</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Library</a>
  </li>
  <li class="breadcrumb-item">
    <a href="#">Long list of item</a>
  </li>
  <li class="breadcrumb-item active" aria-current="page">
    Another long list of item
  </li>
</ol>