Breadcrumbs
Navigation breadcrumb trail showing page hierarchy, composed of breadcrumb items with chevron or slash separators.
Installation
npx paubha@latest add breadcrumbsUsage
import { BreadcrumbItem, Breadcrumbs } from "@/components/ui/breadcrumbs";
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
<BreadcrumbItem current>Installation</BreadcrumbItem>
</Breadcrumbs>Breadcrumbs auto-inserts a chevron separator between children. You never
place separators manually.
Examples
Slash separator
Collapsed with leading icon
Dropdown current page
API reference
Breadcrumbs
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | "chevron" | "slash" | "chevron" | Separator auto-inserted between children. |
BreadcrumbItem
| Prop | Type | Default | Description |
|---|---|---|---|
| current | boolean | false | Marks this as the current page: renders as non-interactive text with aria-current="page" instead of a link. |
| icon | ReactNode | — | Leading icon (Lucide) rendered before the label. |
| href | string | — | Link target (native anchor prop). Ignored when current is set. |
BreadcrumbDropdown
| Prop | Type | Default | Description |
|---|---|---|---|
| menu | ReactNode | — | DropdownMenuItem elements shown when the current-page trigger is opened. |
| icon | ReactNode | — | Leading icon (Lucide) rendered before the label. |
BreadcrumbEllipsis forwards native button props; its accessible name defaults to "Show more breadcrumbs".
Accessibility
Accessibility
Landmark.
<nav aria-label="Breadcrumb">.Structure.
ol/li: every direct child of the list, including each separator, is anli.Current page.
aria-current="page", rendered as non-interactive text rather than a link.Separators. Each is its own
<li role="presentation" aria-hidden="true">, which satisfies both the list structure and the hidden-from-AT requirement at once.Ellipsis. A
buttonlabeled "Show more breadcrumbs"; Enter/Space activates.Dropdown. The current page stays
aria-current="page"on itsli; the trigger is a menu button (aria-haspopup="menu", Enter/Space/ArrowDown opens, Esc closes).