Skip to main content

Breadcrumb

Shows the user’s current location in a page hierarchy and allows them to navigate back through them.

Breadcrumbs are effective in websites that have a large amount of content organized in a hierarchy of more than two levels because they help users understand the organization of the website. They allow a user to navigate quickly to a parent level or previous step.

Breadcrumbs are placed in the top left of the main content column, above the page title.

Example​

<nav aria-label="Breadcrumb" class="bux-breadcrumb">
  <ol class="bux-breadcrumb__list">
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#">Home</a>
    </li>
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#">Level 1</a>
    </li>
    <li class="bux-breadcrumb__item">
      <a class="bux-breadcrumb__link" href="#">Level 2</a>
    </li>
    <li
      class="bux-breadcrumb__item bux-breadcrumb__item--current"
      aria-current="page"
    >
      Level 3
    </li>
  </ol>
</nav>

Usage​

Dos​

  • Use breadcrumbs if content is more than two levels
  • Use breadcrumbs when it is likely that a user will arrive at an interior page from search or from an external link
  • Place breadcrumbs in the top left of the main content column, above the page title
  • Start with “Home” as the first link if “Home” is not in the primary navigation menu

Don’ts​

  • Don’t use breadcrumbs on the homepage of a website
  • Don’t use breadcrumbs if content is single level because they create unnecessary clutter

Implementation Notes​

Javascript​

  • The last item in the breadcrumbs list, the current page, must have the aria-current role set to 'page'

References​

Back to top