Components · Navigation

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

Light

Dark

Accessibility

Spec

Values and token references 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

Build with the skill

No package to install — hand this to your AI to generate the breadcrumb in your stack.

Prompt for your AI

Implement the Zetta "Breadcrumb" component in this project's stack using the zetta-design-md skill.

- Apply the `breadcrumb` spec from the skill (variants: link, current, separator).
- Use this project's own component conventions and framework idioms.
- Reference the Zetta design tokens (CSS variables) for every color, radius, and shadow — never hardcode values.
- Implement all states (hover, focus, active, disabled, and invalid where applicable) with a visible 2px focus ring.
- Honor the Zetta guardrails (brand never shifts hue, shadows for overlays only, etc.) and verify in Light, Dark, and Accessibility.

Anatomy & rules

Links: 13 / 400 Geist, muted, ≥32px target (via min-height). Hover: ink + underline. Current: 13 / 500 ink, not a link.
Separator is 12px disabled-text; 8px gap between items.
Wrap in <nav aria-label="Breadcrumb">; mark the current item aria-current="page".

Known gaps

Overflow / truncation for long trails is not yet specified.