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 "@/components/arc/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 a plain a, or the link component set with ArcProvider (such as next/link or a locale-aware 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.
- Links are plain anchors by default. For client-side navigation, wrap the app once in ArcProvider from @/components/arc/lib/arc-provider with your router's Link: <ArcProvider link={Link}>.
- Keep labels short; the component does not truncate or collapse long paths.
The full library index for assistants is at /llms.txt.
Confirm popoverProComponentA destructive button that grows into a small confirmation card, with the consequence, optional type-to-confirm, progress on the Confirm button, and a check or error before folding back.Mega menu morphProComponentA site header whose menus share one floating panel. Moving between sections morphs its size, slides the next menu in from that side and glides the caret under the new trigger, with hover intent, a safe triangle and an accordion sheet on narrow screens.Table of contents progressProComponentA table of contents that reads along with you: a line bends through the nested headings, fills as you scroll, and carries a marker to the current section, with smooth jumps and a time-left countdown.