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.

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.

How this component works

For mobile resolutions (under 768px), the breadcrumb shows a link to the immediate parent and current page only.

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.