Breadcrumbs
The breadcrumbs component helps users to understand where they are within a website’s structure and to allow them to move between different levels of the site.
Breadcrumbs example
How to use breadcrumbs
Breadcrumbs must accurately follow the structure of the site and should always appear at the top of a page. The breadcrumb should start with your ‘home’ page and end with the current page.
Don’t use breadcrumbs in transactional journeys (such as an application) as they can get in the way of the user completing the task.
Adding breadcrumbs in the CMS
To add breadcrumbs to a page, just add a panel and then add a ‘Breadcrumb component’. When you add the breadcrumb component, it will automatically create the breadcrumb for you based on the page title and its location within the site structure.
On article listing pages (such as news articles) you don’t need to add a breadcrumb component, as this will automatically be generated for you based on the content type of this page.
Breadcrumbs modifier rules
- Background: default (white)
- Grid span: default
- Padding: default on pages with no left hand nav, 'none' top padding on pages with a left hand nav
- Alignment: default
Accessibility
We’ve designed the breadcrumb component so that:
- All text included in breadcrumb items is readable by assistive technology such as screen readers
- Each link in the breadcrumb is operable by a keyboard in addition to a mouse
- The SVG icons are hidden from screen readers using aria-hidden="true"
- Each link is spaced far enough apart that users can easily select the right one
Evidence and research
In testing users interacted with the breadcrumbs and could clearly see what section they were in from the breadcrumbs.