Breadcrumbs

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

General guidelines

Breadcrumbs help users identify their current position on the website within its hierarchical structure. Ensure your breadcrumb navigation reads from left to right. The last breadcrumb on the right should represent the user’s current page.

• The breadcrumb should be wrapped in an element, since it’s a navigation landmark.
• The last item should not be a link since it’s your active page.

• Visual markers between elements should be implemented with CSS.
• The ::before or ::after pseudo class can be leveraged.
• Breadcrumbs are used to show the user's location relative to the sitemap, and not the navigation history.

Guidelines

Displaying an accessible breadcrumb trail

• Breadcrumbs are presented as a list of one or more elements with role=”link”
• The page the user is currently on appears visually at the end of the breadcrumb trail. It is visually distinct from other items on the trail and is indicated programmatically with aria-current=”page” .
• The full breadcrumb path is wrapped in a navigation region that has a label, whether visible or hidden, which describes the breadcrumb region (for example, “Breadcrumb”).

Breadcrumb region label

The breadcrumb region label can be set in one of two ways:

• Using aria-label when the label is hidden. The attribute would take a string value which would act as the region label.
• Using aria-labelledby when the label is visible. The attribute will take the value of the ID of the element containing the visible label.

Keyboard interaction

Breadcrumb links have the same keyboard interactions as other links and can be accessed using the Tab key and activated using the Enter key.

The breadcrumb for the current page can be accessed using the Tab key; the Enter key does nothing.

Breadcrumb separators

Separators help users identify the breadcrumb trail.

This information is semantically represented to the screen reader by the navigation element and its label. To prevent screen reader announcement of the visual separators between links, the breadcrumb separators are added via CSS. Using this display technique ensures that the breadcrumb separator is not represented in the accessibility tree used by screen readers and thus prevents redundant and potentially distracting verbosity.

Testing

When testing breadcrumbs, the tester must ensure:

• The breadcrumbs are fully keyboard operable
• Indications for focused and hovered states are clear, prominent, and coincide with the respective state’s behaviour for the component
• Links are underlined on hover state and have an underline and focus ring on focus state
• Breadcrumbs are appropriately linked, listed, and wrapped in a navigation region
• The screen reader announces all 3 roles properly (in other words, the region, the list, and then the link)
• The navigation region has a label (visible or hidden) which describes the region (for example, “Breadcrumb”)
• The screen reader announces the region label with the navigation region
• The current page on the breadcrumb trail is indicated by a colour difference from other links and that link has a minimum 3:1 contrast ratio with adjacent link text and the background
• The current page is announced by the screen reader as the current page (aria-current="page")
• The current page doesn't become underlined on focus or hover

Related content

• Links
• Lists