Breadcrumb
Explore interactive examples and all component variations in our Storybook.
The Breadcrumb component provides navigational context by showing users their current location within a hierarchy of pages. It supports custom separators, collapsed paths via ellipsis, and integration with router link components via asChild.
Basic Usage
With Ellipsis
Use BreadcrumbEllipsis to collapse middle segments of a long path, keeping the navigation compact while preserving context at the start and end.
Custom Separator
BreadcrumbSeparator renders a ChevronRight icon by default. Pass custom children to use any character or element as the separator.
Longer Path
A five-level deep path to illustrate how the component handles deeper hierarchies.
With asChild
Use asChild on BreadcrumbLink to delegate rendering to a custom element — for example, a <button> or your router's <Link> component. The Breadcrumb applies its styles to the child element via the Slot primitive.
Properties
Breadcrumb
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Should contain a BreadcrumbList. |
className | string | - | Additional CSS classes for the <nav> element. |
Renders as <nav aria-label="breadcrumb">. All standard <nav> props are forwarded.
BreadcrumbList
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | BreadcrumbItem and BreadcrumbSeparator elements. |
className | string | - | Additional CSS classes for the <ol> element. |
BreadcrumbItem
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | A BreadcrumbLink, BreadcrumbPage, or BreadcrumbEllipsis. |
className | string | - | Additional CSS classes for the <li> element. |
BreadcrumbLink
| Property | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Merges props onto the child element instead of rendering an <a>. Use for router integration. |
href | string | - | Navigation target when rendered as an <a>. |
className | string | - | Additional CSS classes. |
BreadcrumbPage
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The label for the current page. |
className | string | - | Additional CSS classes for the <span> element. |
Renders with aria-current="page" and aria-disabled="true". Not interactive.
BreadcrumbSeparator
| Property | Type | Default | Description |
|---|---|---|---|
children | ReactNode | <ChevronRight /> | Custom separator content. Pass a string or element to override the default icon. |
className | string | - | Additional CSS classes for the <li> element. |
BreadcrumbEllipsis
| Property | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the <span> element. |
Renders a <MoreHorizontal> icon with a visually-hidden "More" label for screen readers.