Build Assets
UI Component
Breadcrumb
Navigation trail showing the user's location within a hierarchy.
Platform: webTags: breadcrumb, navigation, hierarchy, wayfinding
Purpose
Helps users understand where they are within a multi-level hierarchy and navigate upward. Most valuable in products with 3+ levels of depth. Not needed for flat navigation structures.
Anatomy
- Items: links separated by a divider (/ or › or chevron)
- Current page: non-linked, slightly darker or same weight as links
- Divider: 12–14px, tertiary color, non-interactive
- Optional: home icon as first item instead of text
States
- Default: secondary color links, dividers, non-linked current page
- Link hover: underline or accent color
- Truncated: middle items collapsed to "…" on mobile with expand tap
Tokens
spacing
itemGap: 4pxfontSize: 0.875rem
sizing
dividerSize: 12px
Do
- Make all items except the current page clickable links
- Keep breadcrumb labels short — match the page h1, not the URL
- Place breadcrumbs above the page heading, not below
- Truncate long trails on mobile: Home › … › Current Page
Don't
- Use breadcrumbs for single-level or flat navigation
- Duplicate the breadcrumb at multiple points on the page
- Make the current page item a link — it's redundant and confusing
- Use breadcrumbs as the only navigation — they supplement, not replace, main nav
Accessibility
- nav element with aria-label="Breadcrumb"
- aria-current="page" on the current (last) item
- Structured as an ordered list <ol> — conveys sequential hierarchy