Breadcrumbs show the current page’s location within a navigational hierarchy and let people move back up to any ancestor.
Figma
The Figma reference for Breadcrumbs will appear here once the design link is added.
Storybook
Interactive examples for Breadcrumbs will render here once the Storybook link is wired in.
Best practices
- Reflect the actual hierarchy, ordered from the top level down to the current page.
- Make the current page the last, non-interactive item.
- Collapse long trails on small screens rather than wrapping across lines.
- Keep each label short and matched to its destination’s title.
Do’s and don’ts
Do
Use breadcrumbs to complement primary navigation in deep hierarchies.
Don’t
Use breadcrumbs as the only way to navigate a flat site with no hierarchy.
Accessibility
- Wrap breadcrumbs in a navigation landmark with a label such as “Breadcrumb”.
- Mark the current page with aria-current so assistive technology announces it.