Breadcrumbs
A horizontal list of links showing the user's location in a site's hierarchy, with each level clickable to navigate up.
Breadcrumbs answer 'where am I?' on deeply nested pages. They appear near the top of the page, separated by a chevron, slash, or arrow, with the current page typically unlinked at the end. The W3C ARIA pattern uses an `aria-label="Breadcrumb"` on a `nav` element. Breadcrumbs are most useful on sites with three or more levels of hierarchy; flat sites don't need them.
Also called
breadcrumb trailpath navigationhierarchical navigation
When to use
- Deeply nested pages where users need to jump up the hierarchy
- E-commerce category pages
- Documentation and reference sites
When not to use
- Flat sites with no real hierarchy
- Single-step flows where back is enough
- Mobile screens with very narrow widths (breadcrumbs eat horizontal space)
Related
Source
W3C ARIA Authoring Practices Guide ('Breadcrumb'). The term comes from the Hansel and Gretel trail of crumbs.