Breadcrumb Design Patterns
Navigation trails that keep users oriented without stealing focus.
Anatomy
A breadcrumb is a secondary navigation aid that reveals the user’s location in a hierarchy. Every crumb is a link except the terminal page, which is rendered as inert text. Separators—typically / , › , or → —sit between crumbs and must never be clickable.
Variants
Location-based
Static hierarchy. Ideal for docs, e‑commerce categories, and deep admin panels. Shows where you are, not how you got there.
Path-based
Records the actual journey. Useful for faceted search, filters, or wizard flows where the back-trail matters.
Truncation
When the trail exceeds available width, collapse mid-crumbs into an ellipsis. The first and last crumbs always remain visible. On hover or tap, expand the collapsed set in a small popover.
Placement
Always above the primary content, below the global header. Left‑aligned in LTR layouts. Never compete with the primary CTA; use a smaller type scale and muted colors so the trail recedes.
Accessibility
- Wrap the trail in a
<nav aria-label="Breadcrumb">. - Mark the current page with
aria-current="page". - Separators must carry
aria-hidden="true". - Collapsed ellipsis buttons need an accessible label describing the hidden crumbs.