Primitive · CLI
Breadcrumbs
Hierarchical navigation trail.
Preview
npx shadcn@latest add @atroui/breadcrumbsInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/breadcrumbsSource lands in your repo. Installation · Registry
Usage
Order items from the root down to the current page. Labels double as React keys, so keep them unique within one trail.
tsx
import { Breadcrumbs } from "@/components/ui/breadcrumbs"
<Breadcrumbs
items={[
{ label: "Docs", href: "/docs" },
{ label: "Components", href: "/docs/components" },
{ label: "Breadcrumbs" },
]}
/>Steps without a page
Leave href off any step that has no page of its own and it renders as plain text instead of a dead link. The trailing item is always plain text carrying aria-current="page" - an href there is ignored, since linking to the page you are already on is noise.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | - | Trail items with optional href. |
| className | string | - | Extra classes on the nav element. |
Breadcrumbs