Breadcrumb
View on StorybookStorybookNavigation component showing the current page location. Automatically adapts to RTL layouts with proper separator positioning.
Preview
Installation
Usage
Examples
Custom Separator
With Icons
Props
| Name | Type | Default | Description |
|---|---|---|---|
separator | React.ReactNode | <ChevronRight /> | Custom separator between breadcrumb items |
Accessibility
Keyboard Navigation
- Tab - Move focus between breadcrumb links
- Enter - Activate the focused link
ARIA Attributes
- aria-label="Breadcrumb" on the navigation element
- aria-current="page" on the current page item
- aria-hidden="true" on separator elements
RTL Considerations
Breadcrumbs automatically reverse order and separator direction in RTL layouts.
- Layout direction follows text direction automatically
- Separator icons mirror appropriately in RTL mode
- Link order reverses naturally in RTL layouts
- Focus indicators position correctly
Use Cases
Hierarchical page navigation
E-commerce category trails
Documentation section paths
File system navigation paths
Best Practices
Do
- ✓ Show the full hierarchy path from root
- ✓ Make each breadcrumb level clickable except the current page
- ✓ Truncate with ellipsis for deep hierarchies
Don't
- ✗ Don't use breadcrumbs as the sole navigation method
- ✗ Don't include the home page if already in the main nav
- ✗ Don't show breadcrumbs on the homepage itself