Breadcrumbs
The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels by making visible the page hierarchy.
When to use this component
Breadcrumbs create an explicit path in the hierarchical structure, from the homepage to, but not including, the current page. In most cases, they relate to the topic the relevant content page is tagged as.
When not to use this component
Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.
If you’re using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.
How it works
Breadcrumbs provide a way of navigating and orienting users:
- Each section of the path is a direct link to the page it represents in the hierarchy.
- Links are in consecutive order and separated by a right pointing chevron to denote order.
- The text for each section represents the title of the page it links to.
- Variations include breadcrumbs without Home at the start and breadcrumbs with a single section.
- On mobile, breadcrumbs are shortened to fit on a single line.
The component accepts an array of breadcrumb objects. Each crumb must have a title and a URL. Links are tracked, but in Universal Analytics, links to the homepage (any link with a url of /) will be tracked separately as homeLinkClicked.
View this component and all its variations in the Component Guide (open in a new tab).
| Date | Description | Document | Format |
|---|---|---|---|
| March 2022 | The Homepage and Navigation Team did a complete audit of the logic and all iterations of this component. |
Breadcrumbs logic (opens in a new tab) | Google Doc |
Accessibility criteria
New WCAG 2.2 criteria affects this component. To use ‘Breadcrumbs’ and meet the new Web Content Accessibility Guidelines (WCAG) 2.2 criteria, make sure that users can successfully interact with breadcrumbs.
The breadcrumb links must have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA (this especially applies when using the inverse flag).
Links in the component must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
How other design systems document this component
How to report an issue
If you happen to come across an issue:
- Report it on Github (opens in a new tab).
- Once the issue has been added, update this document by adding the title and Github Issue's link.
- Give yourself a high-five.
Help improve this component
To help make sure that this page is useful, relevant and up to date, instructions on how to contribute can be found on the GitHub repository (opens in a new tab).