Breadcrumb
The path from the top of a site to the current page, each step a link back.
Installation
npx @yolkui/cli add breadcrumbWith icons
An icon inside a link or the page sits 6 from its label and takes its colour. It stays 16px.
Custom separator
BreadcrumbSeparator draws a chevron. Pass anything else as its children; it is centred in the same 16px.
Collapsed
A deep path can hide its middle steps behind three dots. BreadcrumbEllipsisButton is the trigger of a Dropdown Menu whose items are links, so every step stays reachable. Your app decides which steps hide.
A long path
A path wider than its container wraps onto the next line, so nothing is hidden and nothing scrolls. A separator stays with the step before it and never starts a line.
Long names
A name of unknown length takes a max width and truncate on its link or page, and ends in an ellipsis. Add a title so the whole name shows on hover.
With a router
BreadcrumbLink is an <a>. Pass your router's link in render, so a step changes the page without a reload.
Right to left
Under dir="rtl" the path starts at the right and the chevrons turn around. A separator of your own is not mirrored.
API
Every part takes className and the props of its element.
| Part | Element | What it is |
|---|---|---|
Breadcrumb | nav | The landmark, named "Breadcrumb". aria-label translates the name. |
BreadcrumbList | ol | The row of steps. It wraps when it does not fit. |
BreadcrumbItem | li | One step: a link, the page or the three dots. |
BreadcrumbLink | a | A step that goes somewhere. render takes a router's link. |
BreadcrumbPage | span | The current page, the last step. Not a link. |
BreadcrumbSeparator | li | The mark between two steps: a chevron, or its children. |
BreadcrumbEllipsisButton | button | Three dots that open a menu of hidden steps. Named "Show hidden steps"; aria-label translates it. |
BreadcrumbEllipsis | span | Three dots with no action, for steps that are simply left out. |
Accessibility
The path is a nav landmark holding an ordered list, so a screen reader can jump to it and hears how many steps there are.
- The current page carries aria-current="page" and is read as the current page. It is the last step, is not a link, and is darker and heavier than the links, so colour is never its only sign.
- Separators are decoration and are hidden from screen readers.
- Links take the usual focus outline. Their text is 20px high and the area that takes a click or a tap is 24.
- With several nav landmarks on a page, each needs its own name: keep "Breadcrumb" here, or translate it with aria-label.
- A breadcrumb shows where a page sits in the site, not the pages someone went through. Do not use it for the steps of a form.