Show where you are
Breadcrumbs give users a clear read of their current position in a multi-level structure without hunting through the navigation.
Breadcrumb
Breadcrumbs help users to navigate and understand where they are on the current website or service.
GitHub
components/breadcrumb
components/breadcrumbStorybook
components/breadcrumb
components/breadcrumbStep back easily
Each crumb is a direct link, so users can jump back to any ancestor level with a single click.
Reduce disorientation
On deep or complex sites, breadcrumbs prevent users from losing track of where they came from and how to get back.
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.
Component tokens
Component tokens are specific to each component. Use the table title as the prefix: icon-color under sgds / breadcrumb means sgds / breadcrumb/icon-color.
sgds / breadcrumb
sgds/body-color-defaultsgds/gap/xsSemantic tokens
sgds/body-color-defaultsgds/link-color-defaultsgds/link-color-emphasissgds/color-defaultsgds/bg-transparentsgds/bg-translucent-subtleWhen 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 they are navigating through.
Use overflow on longer trails
When the hierarchy gets deeper, let the breadcrumb collapse middle levels into the built-in overflow menu instead of exposing every level at once.
Do not use breadcrumb for the wrong hierarchy
Breadcrumbs should reflect the actual site or service structure, not a temporary journey such as search, filtering, or a 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. Plain text crumbs break the navigation pattern.
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
Found a bug or issue?
Report it on GitHub
Singapore Government Design System
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.