Show page location
Breadcrumbs show where the current page sits in the site structure.
Components
Breadcrumb
Breadcrumbs help users to navigate and understand where they are on the current website or service.
Link to parent pages
Each previous level is a link, so users can move back up quickly.
Support deep navigation
Use breadcrumbs when users may land inside a deep or nested section.
Number of links
Control how many breadcrumb items are shown. When 5 or more items are present, the middle items automatically collapse into an overflow menu placed as the second link.
Overflow
When there are too many links, overflow can be applied by collapsing items into an ellipsis to prevent visual clutter.
Design tokens used
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-gap-xs8pxsgds-icon-size-sm—When to use
- Use breadcrumb on deeper pages when users need to understand their place in the service hierarchy.
- Use it when the trail helps users move up a level without losing context.
When not to use
- Do not use breadcrumb on shallow journeys where the page title and main navigation already provide enough context.
- Do not use vague or repetitive labels in the trail.
Keep the current page as the last step
All earlier breadcrumb items should link back to previous levels, while the final item represents the current page.
Do not use generic labels
Generic names such as 'Page 1' and 'Page 2' do not help users understand the content or structure.
Use overflow on longer trails
When the hierarchy gets deeper, let the breadcrumb collapse middle levels into the built-in overflow menu.
Do not use breadcrumb for the wrong hierarchy
Breadcrumbs should reflect the actual site or service structure, not a temporary journey or task sequence.
Use specific, meaningful labels
Breadcrumb labels should match the page structure closely so users can predict where each level leads.
Do not leave intermediate crumbs inactive
Every breadcrumb item before the current page should work as a link back to that level.
Built-in accessibility
- Breadcrumb items render links through the SGDS link component.
- The last item is marked as the current location automatically.
Labels and content
- Use link text that matches the destination page.
- Keep the trail short enough for users to scan.
Focus and interaction
- Users should be able to tab through breadcrumb links in page order and reach the overflow menu trigger when it appears.
- Do not remove the native link destination from breadcrumb items.
TabShift+TabEnterSpaceTabor↓ DownShift+Tabor↑ UpEscHave suggestions or feedback?
Share them with us on Slack → #ask-sgds-v3
Found a bug or issue?
Report it on GitHub Issues → sgds/components/breadcrumb