Breadcrumbs
Breadcrumbs help users to understand where they are within a website’s structure.
Show code Hide code
Usage
- use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website
- display in the top left of the main content area above the page title
- reflect the names of the parent-level pages ensuring you use the same labels and casing as the main IA
- use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction
- use breadcrumb navigation to replace effective primary navigation menus
- add breadcrumbs alongside other navigational elements, such as a sidebar, without considering whether users need the additional support
Terminology
Parent page
Starts with the "Home" page and links users to parent-level pages in the IA.
Icon
The chevrons between the names shows the visual hierarchy between pages.
Current page
Indicates the current page the user is viewing.
Ellipsis
Displays when there are more than three breadcrumb items (including "Home") on mobile, letting users tap to reveal the full breadcrumb path.
Mobile behaviour (under 768px)
When the breadcrumb contains more than three items (including "Home"), the component shows only "Home", the immediate parent page, and the current page. The rest of the trail is hidden behind an interactive ellipsis, which can be selected to reveal the full breadcrumb links. If there are three or fewer items, the full breadcrumb trail is shown with no ellipsis.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.