'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Navigation
Breadcrumbs
Where the page sits: a trail of links up to the current page.
Ant Design: Breadcrumb
import { Breadcrumbs, Breadcrumb } from '@alea/ui';
Examples
Breadcrumbs
The last item is the current page.
Custom separator
Any character between items.
Props
Breadcrumbs props
Where the page sits: a trail of links, the last one is the current page.
| Prop | Type | Default | Description |
|---|---|---|---|
separator | ReactNode | - | Character or icon between items. Default a chevron. |
Breadcrumb props
One step of the trail.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The children of the component. A function may be provided to alter the children based on component state. |
href | string | - | Link target. Leave it out on the current page. |
Accessibility
- Put it in a nav with aria-label="Breadcrumb"; the last item is marked as the current page.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves between links; the current page is not a link |
Do and don't
Do
- Start from the top of the section, not always the home page.
Don't
- Don't use it for steps in a flow: use Steps.