Breadcrumbs
DraftAn accessible breadcrumb trail that helps users understand their position within a site hierarchy.
- Usage
- Specs
- Content
- Status & changelog
- Code
Common alternative names
Breadcrumb trail, navigation path, crumbs
Usage guidelines coming soon.
Specs coming soon.
Content guidelines coming soon.
Status & changelog coming soon.
Usage
import { Breadcrumbs } from '@arch-ui/components';
function ProductPage() {
return (
<Breadcrumbs
items={[
{ label: 'Home', href: '/' },
{ label: 'Products', href: '/products' },
{ label: 'Running shoes' },
]}
/>
);
}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | -- | Ordered array of breadcrumb items. The last item is treated as the current page. Required. |
separator | ReactNode | '/' | Separator rendered between items. |
className | string | -- | Additional class names applied to the <nav> element. |
BreadcrumbItem
| Prop | Type | Description |
|---|---|---|
label | string | Visible text for this breadcrumb step. Required. |
href | string | The URL this step links to. Omit for the last (current) item. |
Breadcrumbs supports ref forwarding to the <nav> element.
Custom separator
Replace the default / separator with any React node -- an icon, a chevron character, or a custom component.
<Breadcrumbs
items={items}
separator={<span aria-hidden="true">›</span>}
/>
Accessibility
- Wraps the trail in
<nav aria-label="Breadcrumb">so screen readers can identify the landmark. - Items are rendered inside an
<ol>to convey order. - The last item renders as a
<span>witharia-current="page"instead of a link, since it represents the current location. - Separator elements have
aria-hidden="true"so they are not announced by screen readers.