Breadcrumb

Help users identify their location within the hierarchy of pages.

Description

This component should be constructed using an ol as the order of the items contained matters.

The separators are automatically generated for each item in the breadcrumb component except the last one.

Note In order to provide a good user experience, the breadcrumb item that represents the current location of the user should not be clickable. (i.e. the list item should not contain a link).

Class modifiers:

  • breadcrumb__list-item--current - added on the item that represents the current location of the user; responsible for making the text bold.

Accessibility

A role="navigation" attribute should be added at the list level in order to identify it as navigational landmark for screen readers. When multiple navigation landmarks are on the page, add a aria-label="label" to the list of items in the breadcrumb.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-breadcrumb;

Usage

Usage example

Code example

<nav class="breadcrumb">
  <ol class="breadcrumb__list" role="navigation" aria-label="breadcrumb">
    <li class="breadcrumb__list-item">
      <a class="breadcrumb__list-link" href="#">Parent entity</a>
    </li>
    <li class="breadcrumb__list-item breadcrumb__list-item--current">Current entity</li>
    <li class="breadcrumb__list-item">
      <a class="breadcrumb__list-link" href="#">Child entities</a>
    </li>
  </ol>
</nav>