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
Provides a clickable option to expand and reveal the full breadcrumb path for mobile users.

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 usability

For mobile resolutions (under 768px), the breadcrumb displays a link to the immediate parent and current page only, with a clickable ellipsis allowing users to reveal the full breadcrumb path for breadcrumb lists that contain more than 3 items (including "Home").

The ellipsis button is injected into the list of breadcrumb items by adding js-breadcrumbs class into the nav element that wraps the breadcrumb items.

Accessibility

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