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>) extends Box. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbList
Container for breadcrumb items (renders as <ol>) extends List. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbItem
Individual breadcrumb item container extends ListItem. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbLink
Clickable breadcrumb link for navigation extends Link. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbPage
Current page indicator (non-clickable) This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbSeparator
Separator between breadcrumb items (defaults to chevron-right icon) extends ListItem. This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Custom separator content (defaults to chevron-right icon) |
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
BreadcrumbEllipsis
Ellipsis indicator for collapsed breadcrumb items This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. See style props documentation for details.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes to apply to the component |
asChild | boolean | false | When true, uses Radix Slot to compose functionality onto the child component instead of rendering a default element. The child component must spread props and forward refs. See Radix UI composition guide for details. |
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).