Breadcrumbs
Supplemental navigation that indicates the user’s location in a site or app.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
- Contain all breadcrumb links in an ordered list (
) as list items, because their ordering indicates positioning in the breadcrumb. - Ensure the containing element for the breadcrumbs is a
element and give it an to differentiate it from other navigation regions. - Use
to identify the current breadcrumb page. It is implemented as a span. - Check that the separator icons use the library’s right-to-left class if needed.
Keyboard controls
| Key | Behavior |
|---|---|
| Enter or Space | Activates the focused breadcrumb link to navigate to the corresponding page. |
| Tab | Moves focus to the breadcrumb links sequentially. |
| Shift + Tab | Move focus backward through the breadcrumb links. |