Breadcrumb
Hierarchical navigation breadcrumb. Shows the current page location within the site structure.
Installation
$ npx shadcn@latest add breadcrumbPreview (Click to navigate)
Click any breadcrumb item to navigate
Usage (React/TSX)
import { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
export default function PageHeader() {
return (
<Breadcrumb>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem href="/components">Components</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem active>Button</BreadcrumbItem>
</Breadcrumb>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| href | string | — | Link URL. If omitted, renders as plain text. |
| active | boolean | false | Marks this item as the current page. |
| children | ReactNode | — | Content inside the breadcrumb item. |