Breadcrumbs

Path navigation — where am I, with links back up the tree.

Installnpx shadcn add @cids/breadcrumbs

Live demo

Motion · tap to replay

honors reduced-motion

150ms color on link hover only.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Breadcrumbs } from "@/design-system";

<Breadcrumbs
  items={[
    { label: "Design", href: "/design" },
    { label: "Components", href: "/design#components" },
    { label: "Accordion" }, // current page — no href
  ]}
/>

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--fg
--fg-muted
--fg-subtle

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Link crumbs**: `fg-muted`hover raises to `fg`.**Current page** : `fg` + medium weight +`aria-current="page"`not a link.

Path navigation — where am I, with links back up the tree.

Anatomy

Design / Components / Accordion
└link────┘└link─────┘ └current (aria-current,
     └ "/" separators     text-fg, no link)
        (aria-hidden)

Props

Prop	Type	Default	Notes
`items`	`Crumb[]`	—	`{ label, href? }`; last item is the current page.
`className`	`string`	—	cn-merged onto the nav.

Motion

150ms color on link hover only.

<nav aria-label="Breadcrumb"> wrapping an ordered list — order is the

hierarchy. Separators are aria-hidden (screen readers read the list

structure, not the slashes). Renders plain anchors for portability —

document-level navigation works in any framework.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.