Breadcrumbs

Usage

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.

Do:

• 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

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.

When to avoid

Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.

Breadcrumb navigation should be regarded as an extra feature and shouldn't replace effective primary navigation menus.

If you're using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.

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.