Breadcrumb
Show where a page sits in a hierarchy.
pnpm dlx shadcn@latest add @uiarc/breadcrumbLive · keyboard ready
- Showing where a page sits in a hierarchy, such as Workspace, Settings, Billing.
- Client-side paths like a file browser, where crumbs call onClick instead of navigating.
- Paths that grow as people drill in, where new crumbs should slide in.
- Use tree-view when people need to browse the whole hierarchy.
- Use tabs for switching between sibling views.
- Use pagination for moving through pages of a list.
Installation
Add Breadcrumb with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/breadcrumbAdds the component and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Breadcrumb } from "@/registry/components/breadcrumb/breadcrumb"; export function SettingsPath() { return ( <Breadcrumb items={[ { label: "Workspace", href: "/" }, { label: "Settings", href: "/settings" }, { label: "Billing" }, ]} /> );}Breadcrumb
A path of links where the last item is the current page. Crumbs added later slide in.
PropTypeDefaultDescription
itemsRequired{ label: string; href?: string; onClick?: (event: MouseEvent<HTMLElement>) => void }[]–Path from root to current page. Items with href render next/link; items with only onClick render buttons.ariaLabelstring"Breadcrumb"Label for the nav landmark.- Tab
- Moves between crumb links and buttons.
- Enter
- Follows the focused crumb.
- Renders a nav landmark with an ordered list.
- The last item is a span with aria-current="page" and is never a link.
- Chevron separators are aria-hidden.
- Crumbs present on first render stay still; new crumbs slide in 8px from the left out of a blur while siblings shift on a smooth spring.
- Reduced motion adds and removes crumbs without movement.
- The list wraps onto new lines on narrow screens; individual crumbs never wrap internally.
- It does not truncate or collapse long paths, so keep labels short or shorten the path on mobile yourself.
- Crumbs use layout position animation only when the path changes; static paths do not animate.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for hierarchical page location. For client-side paths such as a file browser, pass onClick without href.
- Keep labels short; the component does not truncate or collapse long paths.
The full library index for assistants is at /llms.txt.