Breadcrumb
Breadcrumb navigation with customizable separators. Displays the current page location within a navigational hierarchy.
Basic Usage
Preview
Two Levels
Preview
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | BreadcrumbItem[] | - | Array of breadcrumb items. Each item has a label (string) and optional href (string). The last item is rendered as the current page. |
| separator | ReactNode | - | Custom separator between items. Defaults to a slash. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders inside a
<nav>element witharia-label="Breadcrumb" - Uses an
<ol>list so screen readers announce the number of items - The current page item uses
aria-current="page"to indicate the active location - Separator characters are hidden from assistive technology with
aria-hidden