Use breadcrumbs to display a list of links to the parent pages of the current page in hierarchical order.
Breadcrumbs help users find their place within a website or web application.
When not to use this component
Do not use the breadcrumbs component on websites with a flat structure.
To help users navigate back through a linear journey or transaction, use a back link.
If you are using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
How to use this component
Always place back links before a page’s
<main> content element.
This allows them to be skipped with the skip to content component.
To ensure the component is placed correctly set breadcrumbs in the pageConfig of the base page template.
How it works
The set of links is structured using a
<ul> to provide semantic structure.
<nav> element labelled “Breadcrumbs” identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
To prevent screen readers announcing the visual separators between links, they are added via CSS.
The separators are part of the visual presentation that signifies the breadcrumb trail.
This is already semantically represented by the
<nav> element with its
aria-label of “Breadcrumbs”. Therefore, using a display technique that is not used by screen readers prevents unnecessary distraction.
When the component only has a single breadcrumb it will display like this.