Modifiers
Overflow
If there are more than three breadcrumbs, the earlier breadcrumbs will roll up into an overflow. The user will see the current page’s breadcrumb and the previous page’s breadcrumb.
Usage
Breadcrumbs should appear in the same place on every page. Breadcrumbs live at the top of the page, right after the primary navigation.
Breadcrumbs should show the user the location of their current page within the website’s hierarchy, not the path the user took to get to that page.
Content guidelines
Do:
- Ensure that the page’s h1 (title) and the page’s breadcrumb text match
- Use sentence case, except for proper nouns and product names
- Consider editing any breadcrumb text that wraps or is excessively long
Don't:
- Mismatch the text of the page’s h1 (title) and the page’s breadcrumb
- Truncate the breadcrumb text — for example, Lorem ipsum...
- Add a trailing slash on the current page’s breadcrumb
User research
Key takeaways
- Users may overlook breadcrumbs, but they never misinterpret breadcrumb trails or have trouble using them
- Breadcrumbs should show the site hierarchy, not the user's history
- Breadcrumbs won't help a site answer users' questions or fix a confusing information architecture
Study links
Primary sources (Boston Scientific user research)
No sources
Secondary sources
Nielsen Norman Group — Breadcrumb Navigation Increasingly Useful
Accessibility
This component passes AAA WCAG standards. However, changes made by the content owner or implementer could impact accessibility compliance. Be sure to follow code standards and content guidelines to ensure that this component is fully accessible.
For more information, see the WAI-ARIA Authoring Practices for breadcrumbs and Deque’s screen reader keyboard shortcuts and gestures documentation.