A breadcrumb shows a user where they are in a website’s structure. It also presents links to pages higher in the site’s structure, such as a home page.
About this component
The breadcrumbs component should:
- be used if a website has 2 or more levels in its structure
- include the user’s current page
- display the “current page” item in a clearly different style from the other items in the breadcrumbs
You might not need a breadcrumbs component if the website has a top level navigation, such as a meganav or global navigation.
You should omit the breadcrumbs component from parts of a website where a user needs to go through pages in a certain order. This includes things like online forms and multi-page calculators.
Why we use this component
Breadcrumbs are online best practice for supporting user navigation.
There is evidence from mygov.scot that users interact with the breadcrumbs more than other forms of navigation, for example in-page panel links or the back swipe button.
Where there may be issues with repetition or page titles are too long, a version of breadcrumbs which do not include the current page can be used. In these cases keep the current page available to screen readers through the use of the
visually-hidden CSS class.
To understand user behaviour, clicks on breadcrumb items can be tracked through the original page path, the click URL, the click text, and a data attribute showing the item number.
The data attribute is added automatically by the Design System’s “tracking” script.
You should include a Schema representation of the breadcrumbs. One useful benefit of using Schema representation is that it allows a breadcrumb trail to be accurately displayed on search engines and will help users navigate the structure of your site.
This Google structured data guidance for breadcrumbs is a helpful reference.
- Use of a <nav> element with aria-label=”breadcrumb” is recommended. You can find out more about this on GitHub.
- This breadcrumb component contains all the accessibility features for breadcrumbs described in WAI-ARIA’s authoring practices for breadcrumbs.
- W3C may also be useful.
- You should make sure that separators between breadcrumb items are not read by screen readers and avoid using font glyphs for them – these can cause accessibility problems.
Feedback, help or support
If you need any help or want to give any feedback you can e-mail us at: firstname.lastname@example.org