Breadcrumb
Where the page sits, with the path back up.
import { Breadcrumb } from "@flinbu/seed";Short and collapsed
import { Breadcrumb, Button } from "@flinbu/seed";
<div className="flex flex-col gap-base">
<Breadcrumb items={[{ label: "Acme DS", href: "#" }, { label: "Tokens", href: "#" }, { label: "Color" }]} />
<Breadcrumb maxItems={3} items={[{ label: "Workspace", href: "#" }, { label: "Systems", href: "#" }, { label: "Acme DS", href: "#" }, { label: "Components", href: "#" }, { label: "Button" }]} />
</div>Use it for
- Pages two or more levels deep.
Use something else for
- Flat sites, or as the only navigation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | { label, href?, onClick? }[] | – | Top level first; the last is the current page. |
maxItems | number | 4 | Collapse the middle into a menu above this. |
linkAs | ElementType | 'a' | Your router's Link. |
Accessibility
- A nav landmark with an ordered list; the current page has aria-current=page.
- Collapsed levels open in a menu.