ComponentCraft conventionFoundational
Breadcrumb
A trail showing where you are in a hierarchy, useful when the hierarchy is deeper than two levels.
Definition
Breadcrumbs display the path from the root to the current location, with each ancestor as a link. They orient users who arrive from search and provide a fast route back up.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this page
Rules
- Reflect hierarchy, not history. A breadcrumb is not a back button.
- The current page appears last, unlinked, marked with aria-current page.
- Wrap in a nav element with an accessible name such as Breadcrumb, and use an ordered list.
- Truncate the middle on small screens rather than the ends, since the root and the parent are the useful ones.
- Add structured data where search visibility matters.
- Skip breadcrumbs entirely for flat structures. They add noise without information.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Applies when you are designing
Principles behind this
The reasoning this solution is an application of.
- Visibility of System StatusHeuristic
Check your work
Review passes that test whether this was done properly.
- Mobile UX ChecklistChecklist
- Web UX ChecklistChecklist
Related concept
Connected closely enough to change how you apply this.
- Information ArchitectureResearch method
- SEO for Content ProductsUX writing