Breadcrumb
Accessible React breadcrumb trail with links, a current page, custom separators, and collapsing of the middle items. Uses a nav landmark and aria-current.
Breadcrumb shows where the current page sits in the site. Use BreadcrumbLink for parent pages and BreadcrumbPage for the current one.
When to use
Use Breadcrumb on pages more than one level deep in a portal so users see where they are and can move up. Show the trail near the top of the page and use BreadcrumbPage for the current page.
Collapse the middle on long paths. Do not use breadcrumbs as the only navigation.
Examples
Props
Props declared by Breadcrumb. Native attributes of the underlying element pass through.
<Breadcrumb>
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" |
<BreadcrumbLink>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Render as the consumer element (e.g., a router Link) via Radix Slot. |
<BreadcrumbPage>
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | Render as the consumer element (e.g., a heading) via Radix Slot. |
<BreadcrumbSeparator>
| Prop | Type | Default | Description |
|---|---|---|---|
children | react.ReactNode | Override the default ChevronRight icon with custom content (e.g., /, ·,
or your own SVG). The wrapper itself stays aria-hidden since separators
are decorative - the visited-state structure is conveyed via the <ol>
|
Accessibility
Breadcrumb renders a <nav> with an aria-label and an ordered list, so it is exposed as a landmark. The current page carries aria-current="page", and separators are hidden from assistive technology.
The ellipsis for collapsed items is a button that reveals the hidden links.