Breadcrumbs
The breadcrumbs component helps users understand where they are within a website’s structure and move between levels.
When to use this component
Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website.
When to use this component
Do not use the breadcrumbs component on websites with a flat structure, or to show progress through a linear journey or transaction.
You do not need to show the current page in the breadcrumb because this information is in the H1.
How it works
Always place breadcrumbs at the top of a page, before the <main> element. Placing them here means that the ‘Skip to main content’ link allows the user to skip all navigation links, including breadcrumbs.
The breadcrumbs should start with your ‘home’ page and end with the parent section of the current page.
There are 2 ways to use the breadcrumbs component. You can use HTML or, if you are using Nunjucks, you can use the Nunjucks macro.
Get the Nunjucks macro for this example from the Camden Frontend library
Collapsing breadcrumbs on mobile devices
If you have long breadcrumbs you can configure the component to only show the first and last items on mobile devices.
To do this, add a govuk-breadcrumbs--collapse-on-mobile class to the outer <div> element of the component HTML. Or if you’re using Nunjucks, add collapseOnMobile: true to the Nunjucks macro as shown in this example.
Get the Nunjucks macro for this example from the Camden Frontend library
Breadcrumbs with inverted colours
Use the govuk-breadcrumbs--inverse modifier class to show white links and arrows on dark backgrounds – for example, in headers, custom components, and patterns with darker backgrounds.
Make sure all users can see the breadcrumbs – the background colour must have a contrast ratio of at least 4.5:1 with white.
Get the Nunjucks macro for this example from the Camden Frontend library
Research on this component
This component is based on the breadcrumb component from the GOV.UK Design System.
You can take part in the ‘Breadcrumb’ discussion on GOV.UK’s Design System’s GitHub and share your research.