Components · Wayfinding
Breadcrumb
An inline trail showing the current location in a hierarchy. Links are muted and underline on hover; the final item is the current page — bold and not a link.
Preview
Build with the skill
No package to install — hand this to your AI to generate or migrate the component in your stack.
Apply the Zetta "Breadcrumb" component to this project using the zetta-design-md skill.
WHEN TO USE
- Migrating or fixing existing code (the common case): audit the current implementation against the `breadcrumb` spec (variants: link, current, separator) and CORRECT every deviation — replace off-spec values, don't only add new ones.
- New component: build it to the `breadcrumb` spec in this project's stack.
AUDIT & FIX (when the component already exists)
Compare it to the skill's spec and fix, don't just append: hardcoded colors/hex, off-scale radius, wrong fonts, dark/navy fills, shadows used in place of borders (or missing borders), brand lime used as a CTA or interaction (must be primary indigo), and any missing or wrong hover / focus / active / disabled / invalid state or missing 2px focus ring. Replace each with the correct Zetta token.
ALWAYS
- Pull the authoritative spec and tokens from the skill — never guess or hardcode values.
- Use this project's own component conventions and framework idioms.
- Honor the Zetta guardrails (brand = identity only, primary = interaction, shadows for overlays) and verify in Light, Dark, and Accessibility.Anatomy & rules
← nav aria-label="Breadcrumb" ───────────────────────────────
Projects / Engineering / … / Settings / Members
↑ link ↑ link ↑ ↑ link ↑ current
(muted) (muted) ellipsis (muted) (ink/500)
| State | Text color | Notes |
|---|---|---|
| Default — link | {colors.muted} |
Navigable ancestor |
| Hover — link | {colors.ink} |
Underline on hover |
| Focus — link | {colors.muted} + 2px solid {colors.border-focus} outline |
Keyboard only |
| Current page | {colors.ink} |
aria-current="page", not a link |
| Disabled | {colors.disabled-text} |
Non-navigable ancestor |
When to use
- Pages that are more than one level deep in a product hierarchy.
- Any page where the user may want to navigate up to a parent context.
When not to use
- Flat navigation with no hierarchy — omit the breadcrumb.
- Single-level apps (dashboards with no drilldown) — breadcrumb adds noise without value.
- Inside a modal or drawer — the overlay's own title provides location context.
Do
- Replicate the exact page title at each level — no abbreviation or rewording.
- Keep the last item (current page) non-interactive — it's where the user already is.
- Use ellipsis collapse when more than 4 levels are visible.
Don't
- Don't use breadcrumb as the primary navigation — it's supplementary.
- Don't invent breadcrumb paths that don't reflect the actual URL hierarchy.
- Each item label must match the page title it links to exactly.
- No icons in breadcrumb items — text only.
- Separator character is presentational — use
aria-hidden="true".
Keyboard
| Key | Behavior |
|---|---|
Tab |
Move focus through breadcrumb links |
Enter |
Navigate to the focused link destination |
Space |
Expand the ellipsis (if collapsed) |
Accessibility
- Wrap in
<nav aria-label="Breadcrumb">. - Use
aria-current="page"on the last (current) item. - Separator elements:
aria-hidden="true". - Ellipsis button:
aria-label="Show full path"oraria-label="More breadcrumbs".
Spec
Values and token references resolved straight from the Zetta spec.
breadcrumb-item
- display
- flex
- alignItems
- center
- gap
- {spacing.sm}
breadcrumb-link
- textColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 13px
- fontWeight
- 400
- cursor
- pointer
- textDecoration
- none
- minHeight
- 32px
- display
- flex
- alignItems
- center
breadcrumb-link-hover
- textColor
- {colors.ink}
- textDecoration
- underline
breadcrumb-link-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
- borderRadius
- {rounded.sm}
breadcrumb-item-current
- textColor
- {colors.ink}
- fontFamily
- Geist
- fontSize
- 13px
- fontWeight
- 500
- cursor
- default
breadcrumb-separator
- textColor
- {colors.disabled-text}
- fontSize
- 12px
- display
- flex
- alignItems
- center
breadcrumb-ellipsis
- textColor
- {colors.muted}
- fontFamily
- Geist
- fontSize
- 13px
- cursor
- pointer
- paddingX
- {spacing.xs}
- borderRadius
- {rounded.sm}
breadcrumb-ellipsis-hover
- backgroundColor
- {colors.primary-bg}
- textColor
- {colors.primary}
breadcrumb-ellipsis-focus
- outline
- 2px solid {colors.border-focus}
- outlineOffset
- 2px
Known gaps
- Breadcrumb item with a trailing icon (external link) — icon size and color spec pending.