● Patterns / Breadcrumb
Breadcrumb.
Breadcrumb is the system’s compact hierarchy pattern. It gives readers a quick path back to a parent page while keeping the current location explicit.
How the pattern behaves
Breadcrumb is used when a page sits inside a larger section and the parent path matters. In this system it appears above the design system case study to let readers step back to the work index.
The interaction is intentionally quiet. Ancestor items are muted links, the current page is plain text, and the visual framing stays lighter than the main page heading.
Source of truth
Breadcrumb accepts an `items` array of label and optional href pairs. Earlier crumbs can link, and the final crumb is always treated as the current page.
Pattern roles
Breadcrumb is not a replacement for primary navigation. Its job is to restore context inside a known hierarchy.
Wayfinding pattern
Shows where the current page sits within a small content hierarchy.
Context handoff
Helps readers recover the parent page without interrupting the main page heading.
Lightweight navigation
Keeps navigation terse by linking only earlier levels and rendering the current page as plain text.
Anatomy
The pattern is intentionally small: one leading cue, a short sequence of crumbs, and a clear end state for the active page.
Leading back cue
A muted arrow introduces the breadcrumb as a return-oriented navigation aid.
Linked ancestors
Each earlier crumb can link back to a parent section or landing page.
Current page label
The last item is rendered as text rather than a link so the current location reads as final.
Slash separators
Muted separators keep hierarchy readable without turning the pattern into heavy chrome.
Guidelines
- Use Breadcrumb when a page belongs to a clear parent path, especially case studies, system docs, or nested content pages.
- Keep labels short and recognizable; breadcrumb trails work best as orientation, not description.
- Only link ancestors. The final crumb should stay plain text to mark the active page.
- Use shallow trails. If the path grows too long, the information architecture likely needs simplification.
- Place the breadcrumb above the main content so it resolves orientation before the reader reaches the heading.
In practice
Does this page have a meaningful parent page?
If yes, Breadcrumb is a good fit.
Is the last item clickable?
It should not be; the current page renders as text.
Are labels getting long or sentence-like?
Shorten them so the trail stays scannable.
Is the hierarchy deeper than two or three levels?
Recheck the IA before extending the trail.
Does the page already have strong local navigation?
Use Breadcrumb only if it adds orientation rather than redundancy.