Guidelines
When to use:
- Clear hierarchy: Use Breadcrumbs to enhance navigation on multi-level pages and clearly indicate the current page title.
- Single page: Use Breadcrumbs on single-level pages to maintain layout consistency when there’s no parent page.
When not to use:
- Side Panels: Avoid using Breadcrumbs within Side Panels, as they should represent full-page links.
- Random hierarchy: Do not use Breadcrumbs for pages that don't follow a predefined page hierarchy.
- Ghost pages: Ensure each Breadcrumb item links to a valid page to maintain accurate navigation.
Breadcrumbs with count 1 are used on single-level pages to maintain layout consistency when there’s no parent page.
Don't use Breadcrumbs inside other elements, such as Side Panels and other overlays.
Good to know
Breadcrumbs are automatically generated in code based on the product’s page structure. Designers don’t define the breadcrumb items manually, but they should understand the logic to ensure that pages are designed with the correct hierarchy and navigation context in mind.
Best practices
- Keep the hierarchy clear by showing only relevant pages in the product structure.
- Avoid using Breadcrumbs in Side Panels or other overlays.
- Use Breadcrumbs sparingly on mobile, showing only the current page title and the ellipsis if needed.
Count
- 1–3 items: Display the current page and up to two previous levels on desktop screens. On mobile, only count 1 is available.
- 4+ items: From the 4th item onward, items are hidden under an ellipsis dropdown button.
Position
Breadcrumbs should always be placed at the top of the page, immediately following the Appbar.
Old implementation vs. new Breadcrumbs
The Breadcrumbs have been redesigned according to the Design Vision, but product teams still need to migrate them to the latest version.
To avoid confusing our customers, we updated the old implementation style to visually match the new design as much as possible. However, since this component appears on nearly every page, our team wasn’t able to review all existing usages.
That’s why product teams need to replace the old Breadcrumbs in code with the latest version from the Design System to enable new features like truncation and improved semantics.
New Breadcrumbs support truncation and display hidden items in an openable overlay for better usability on deep paths.
Old Breadcrumbs match the new style but won't truncate. We added a max-width on items to improve usability when the path is long.
Behavior
Interactions
- Only Past Breadcrumb items are clickable and will direct the user to the corresponding page.
- The Current item is always static and non-interactive.
Layout
Responsive behavior
- Desktop: Up to 3 items are visible at once. The ellipsis button appears starting from the 4th item.
- Mobile: Only the current page title is shown, with the ellipsis button appearing from the 2nd item.