oks-uiBreadcrumbs component
Breadcrumbs is a navigation trail with a chevron separator, automatic collapse-to-ellipsis when the path is long, and router-link polymorphism.
Playground
Change a prop on the right and the preview updates. Switch to Code to copy what you see.
Recipes
Copy-paste patterns for the ways Breadcrumbs actually gets used — each one a real, self-contained example.
Basic trail
A navigation trail — each BreadcrumbItem with an href is a link; the last item is the current page (no link, aria-current). Separators are drawn in CSS.
<Breadcrumbs aria-label="Basic breadcrumb">
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/reports">Reports</BreadcrumbItem>
<BreadcrumbItem isCurrent>Q3 revenue</BreadcrumbItem>
</Breadcrumbs>Collapse a long path
maxItems collapses the middle of a deep path to an ellipsis (that expands on click), keeping the first and last crumbs visible.
<Breadcrumbs aria-label="Collapsed breadcrumb" maxItems={4}>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/a">Accounts</BreadcrumbItem>
<BreadcrumbItem href="/a/b">Astrobit</BreadcrumbItem>
<BreadcrumbItem href="/a/b/c">Projects</BreadcrumbItem>
<BreadcrumbItem href="/a/b/c/d">Website</BreadcrumbItem>
<BreadcrumbItem isCurrent>Settings</BreadcrumbItem>
</Breadcrumbs>Icon in a crumb
A crumb's children can include an icon — a home glyph on the root is the common case.
<Breadcrumbs aria-label="Breadcrumb with icon">
<BreadcrumbItem href="/">
<HomeIcon /> Home
</BreadcrumbItem>
<BreadcrumbItem href="/team">Team</BreadcrumbItem>
<BreadcrumbItem isCurrent>Ada Lovelace</BreadcrumbItem>
</Breadcrumbs>Router links
Pass `as` to render each crumb through your router's link component instead of a plain anchor.
import Link from "next/link";
<Breadcrumbs aria-label="Breadcrumb with router links">
<BreadcrumbItem as={Link} href="/">Home</BreadcrumbItem>
<BreadcrumbItem as={Link} href="/reports">Reports</BreadcrumbItem>
<BreadcrumbItem isCurrent>Q3 revenue</BreadcrumbItem>
</Breadcrumbs>Example
<Breadcrumbs>
<BreadcrumbItem href="/">Home</BreadcrumbItem>
<BreadcrumbItem href="/reports">Reports</BreadcrumbItem>
<BreadcrumbItem>Q3 revenue</BreadcrumbItem>
</Breadcrumbs>Props
The full public API for Breadcrumbs. Every prop is stable and intentionally typed.
Appearance
| Prop | Type | Default | Description |
|---|---|---|---|
| separator | ReactNode | chevron | Rendered between items. |
separator
ReactNode
default: chevron
Rendered between items.
Behavior & states
| Prop | Type | Default | Description |
|---|---|---|---|
| maxItems | number | — | Collapse the middle into a clickable … once exceeded. |
| itemsBeforeCollapse | number | 1 | Leading items kept when collapsed. |
| itemsAfterCollapse | number | 2 | Trailing items kept when collapsed. |
| href | string | — | Renders an <a>. |
| isCurrent | boolean | last item | Render as current-page text with aria-current. |
| as | ElementType | "a" / "span" | Render the link as another component (router Link). |
maxItems
number
default: —
Collapse the middle into a clickable … once exceeded.
itemsBeforeCollapse
number
default: 1
Leading items kept when collapsed.
itemsAfterCollapse
number
default: 2
Trailing items kept when collapsed.
href
string
default: —
Renders an <a>.
isCurrent
boolean
default: last item
Render as current-page text with aria-current.
as
ElementType
default: "a" / "span"
Render the link as another component (router Link).
Styling
| Prop | Type | Default | Description |
|---|---|---|---|
| classNames | { base?, list?, item?, separator? } | — | Slot class overrides. |
classNames
{ base?, list?, item?, separator? }
default: —
Slot class overrides.
Accessibility
- Wrapped in `<nav aria-label="Breadcrumb">` with an ordered list.
- The current page is the last item, is not a link, and carries `aria-current="page"`.
- Separators are generated in CSS so they are never read aloud.
