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
RTL Support Example
The Breadcrumb component automatically adapts to RTL layouts. Layout direction and separators mirror correctly.
LTR (English)
RTL (العربية)
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
The Breadcrumb component is fully RTL-compatible with automatic layout adaptation.
- Layout direction follows text direction automatically
- Separator icons mirror appropriately in RTL mode
- Link order reverses naturally in RTL layouts
- Focus indicators position correctly