Breadcrumb
Navigation 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