Breadcrumbs
A breadcrumb navigation component that provides hierarchical navigation context. Composed of Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, and BreadcrumbEllipsis components.
Installation
Import
Usage
Use Breadcrumb for hierarchical navigation to show users their current location and provide quick navigation to parent pages. Always use BreadcrumbPage for the current page (non-clickable) and BreadcrumbLink for parent pages. Use BreadcrumbEllipsis when there are too many items to display.
Design Guidelines
Keep breadcrumb paths concise and meaningful. Use ellipsis when breadcrumbs become too long. Maintain consistent separator styling. Use BreadcrumbPage styling to distinguish the current page from links. Ensure breadcrumbs are easily scannable and clickable.
Basic Usage
Simple breadcrumb navigation
Multi-Level Navigation
Breadcrumb with multiple navigation levels
Custom Separator
Breadcrumb with custom separator
With Ellipsis
Breadcrumb with ellipsis for collapsed items
Breadcrumb
Main breadcrumb container (renders as <nav>) packages.composedComponents.extends Box. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbList
Container for breadcrumb items (renders as <ol>) packages.composedComponents.extends List. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbItem
Individual breadcrumb item container packages.composedComponents.extends ListItem. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbLink
Clickable breadcrumb link for navigation packages.composedComponents.extends Link. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbPage
Current page indicator (non-clickable) packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbSeparator
Separator between breadcrumb items (defaults to chevron-right icon) packages.composedComponents.extends ListItem. packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
children | React.ReactNode | — | Custom separator content (defaults to chevron-right icon) |
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
BreadcrumbEllipsis
Ellipsis indicator for collapsed breadcrumb items packages.composedComponents.stylePropsNote.part1 packages.composedComponents.stylePropsNote.linkTextpackages.composedComponents.stylePropsNote.part2
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
className | string | — | packages.commonProps.className.description |
asChild | boolean | false | packages.commonProps.asChild.description.part1 packages.commonProps.asChild.description.linkText packages.commonProps.asChild.description.part2 |
Accessibility
Accessibility features and considerations
Breadcrumb automatically includes aria-label='breadcrumb' on the nav element. BreadcrumbPage includes aria-current='page' and aria-disabled='true'. BreadcrumbSeparator includes role='presentation' and aria-hidden='true'. Ensure proper semantic structure with BreadcrumbList (ol) and BreadcrumbItem (li).