Canonical inventory
Navigation · core
Breadcrumb
navigation.breadcrumbBreadcrumb: A wayfinding control that moves between locations, views, or levels of an interface.
breadcrumbthe page trailyou are here linkshierarchy paththe control that changes viewsthe wayfinding element
States5
Touch target44px
Evidence6
Introduced by8 kits
Visual specimen
Same contract. Every kit voice.
Translation table
What code calls it.
Web<nav aria-label=Breadcrumb>The closest native or standardized web primitive.direct
ARIAnavigationThe primary accessibility role or state pattern.direct
SwiftUINavigationPath compositionThe nearest named SwiftUI API.direct
AppKitCustom NSView compositionAppKit has no single direct equivalent; use a custom view or controller composition.approximation
Anatomy
Every part, named.
- 1Navigation container
- 2Destination or view labels
- 3Current-location indicator
- 4Keyboard and focus behavior
Often confused with
Similar shape. Different contract.
Prompt · paste into your agent
Ask for the exact thing.
Implement the canonical Breadcrumb component (navigation.breadcrumb). Breadcrumb: A wayfinding control that moves between locations, views, or levels of an interface. Support these states: default, hover, focus-visible, active, disabled. Use semantic design tokens rather than raw visual values. Preserve a minimum 44px touch target where interactive. Provide and verify: implementation, state-matrix, responsive, keyboard, touch, reduced-motion. Keep the component API stable so every Studio kit can supply its own rendering without changing the behavior contract.Studio contract
What must be proven.
Required states
default · hover · focus-visible · active · disabled
Required evidence
implementation · state-matrix · responsive · keyboard · touch · reduced-motion
Source union
mavan · jade · lumen · aurora · cabana · purple-rain · spatial · margin