- Button
- Date Picker
- Field
- Fields
- Input Group
- File Uploader
- Signature Pad
- Text Area
- Container
- Section Header
- Separator
- Spacer
- Action Row
- Breadcrumb
- Tabs
- Tabs Container
- Card
- Image
- Text
- Title
- Video Player
- Card Collection
- Data Grid
- List Collection
- Table Collection
- Bar Chart
- Big Number
- Line Chart
- Radial Chart
- Hint
- Progress
- Spinner
- Skeleton
- Toast
- Sheet
- Dialog
- Real-world patterns
- Primitives
Hierarchical navigation showing the current page location, with clickable parent links and support for collapsed paths.
Basic Usage
Custom Separators
Customize the separator between breadcrumb items with different icons or characters.
With Icons
Add icons to breadcrumb items for enhanced visual clarity and recognition.
Collapsed Navigation
For long navigation paths, use a dropdown menu with BreadcrumbEllipsis to show collapsed intermediate levels.
API Reference
Breadcrumb
The root container for the breadcrumb navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
BreadcrumbList
An ordered list containing breadcrumb items and separators.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
BreadcrumbItem
A list item wrapper for breadcrumb links or pages.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
BreadcrumbLink
A clickable link to a parent page in the navigation hierarchy.
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | - | Link destination URL |
asChild | boolean | false | Render as a child component (e.g., Next.js Link) |
className | string | - | Additional CSS classes |
BreadcrumbPage
Represents the current page (non-clickable) in the breadcrumb trail.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
BreadcrumbSeparator
A separator between breadcrumb items.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | <ChevronRight /> | Custom separator icon or content |
className | string | - | Additional CSS classes |
BreadcrumbEllipsis
An ellipsis indicator for collapsed breadcrumb items, typically used with a dropdown menu.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |