Breadcrumb
A navigation trail of composable parts — nav, list, item, link, page and separator — with a data-driven composite for simple trails
Installation
Usage
Data-driven
For simple trails, the composite Breadcrumb renders items in order — the last entry becomes the current page, the rest render as links:
"use client";
import { Breadcrumb } from "@/ui";
export default function BreadcrumbDataDemo() {
return (
<div className="p-4">
<Breadcrumb
items={[
{ label: "Home", href: "#" },
{ label: "Project", href: "#" },
{ label: "Current Page" },
]}
/>
</div>
);
}
Parts composition
Every layer is exported as a part — compose them freely for full control over items, icons and separators:
"use client";
import {
BreadcrumbRoot,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbPage,
BreadcrumbSeparator,
} from "@/ui";
export default function BreadcrumbBasicDemo() {
return (
<BreadcrumbRoot>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink>Home</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink>Project</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Current Page</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</BreadcrumbRoot>
);
}
API Reference
Breadcrumb
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbDataItem[] | - | Trail entries in hierarchy order; the last renders as page |
className | ClassNameValue | - | Custom class names, applied to the root <nav> |
style | React.CSSProperties | - | Inline styles, applied to the root <nav> |
classNames | list / link / page / separator | - | Custom class names per slot |
styles | list / link / page / separator | - | Custom styles per slot |
...props | React.ComponentProps<"nav"> | - | Native nav props, spread onto the root |
BreadcrumbDataItem
| Field | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | - | Entry text |
href | string | - | Link target; entries with it render as links |
Composable Components
The parts extend native DOM props and merge their built-in className through cn — passing className extends the defaults instead of replacing them.
BreadcrumbRoot
The outer <nav aria-label="breadcrumb"> container.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
...props | React.ComponentProps<"nav"> | - | Native nav props |
BreadcrumbList
The inner <ol>, flex layout with wrapping.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
...props | React.ComponentProps<"ol"> | - | Native ol props |
BreadcrumbItem
A single <li> entry container.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
...props | React.ComponentProps<"li"> | - | Native li props |
BreadcrumbLink
A clickable trail link (a real <a>).
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
...props | React.ComponentProps<"a"> | - | Native a props |
BreadcrumbPage
The current page text (not clickable, aria-current="page").
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
...props | React.ComponentProps<"span"> | - | Native span props |
BreadcrumbSeparator
The separator, rendering a ChevronRight icon by default — replace via children.
| Prop | Type | Default | Description |
|---|---|---|---|
className | ClassNameValue | - | Custom class names |
children | React.ReactNode | - | Custom separator content |
...props | React.ComponentProps<"li"> | - | Native li props |