Anatomy
The Breadcrumbs consists of three primary elements that work together to represent navigation hierarchy.
- Breadcrumb item link
- Separator
- Current page
Options
The Breadcrumbs supports one configuration that shows each Breadcrumb Item as a link, with the last item representing the current page.Default
Breadcrumbs have one configuration. Each Breadcrumb Item displays as a link, and the last Breadcrumb Item represents the current page.
Behavior
The Breadcrumbs responds to navigation interactions and overflow scenarios while maintaining clear hierarchy representation.Visual States
Note that the last Breadcrumb item, the current page, is not interactive, and has no additional visual states.
Interactions
All Breadcrumb items except the last item are links. Do not place items that cannot be represented as navigational elements in the Breadcrumbs.Breadcrumb Group Overflow
Breadcrumb Item Overflow
Usage Guidelines
When to Use
Use Breadcrumbs when the product area has a multi-level hierarchy that allows users to understand and navigate the product hierarchy.When not to use
Do not use Breadcrumbs when:- There is no hierarchical relation to display
- Users cannot navigate through the hierarchy displayed in a Breadcrumb
- A user is in a linear flow. Use a Stepper instead.
How to Use
Only use Breadcrumbs to represent the site hierarchy
Use Breadcrumbs only to represent the hierarchy of the site or product area. This is sometimes known as location-based Breadcrumbs. Do not use Breadcrumbs to denote path-based behavior, where Breadcrumb content is dynamically generated based on the path users took to get to a page.
Do Example using this doc site to show the site hierarchy.
Don’t Example of a hypothetical user session arriving to the same page. Breadcrumbs should not be used this way.
Always show the current page in the Breadcrumbs
When using Breadcrumbs, always represent the current page in the Breadcrumbs, even if the page title shows the same content.
Do
Don’t
Always provide navigation within Breadcrumbs
Breadcrumb items always have a link to navigate. If part of the hierarchy lacks a link, do not include it in the Breadcrumb trail. The trailing Breadcrumb item, the current page, does not display its own link.Skip the Breadcrumbs for the top-level item
The top-most part of the Breadcrumb hierarchy does not need to display the Breadcrumbs directly. For example, if the first Breadcrumb item was a “Settings” page, the actual Settings page would not show the Breadcrumb.Content
Content within the Breadcrumbs should clearly represent the navigation hierarchy through descriptive labels.Keyboard Interaction
Users can navigate the Breadcrumbs using standard keyboard controls.| Key | Interaction |
|---|---|
| Enter | Engages the link and moves focus to the link target |
| Tab | Navigates linked Breadcrumbs in normal Tab order |