Breadcrumbs
A quiet path back through the hierarchy.
Live — this one is real
Usage
import { Breadcrumbs } from "mizu-ui";
export function Example() {
return (
<Breadcrumbs
items={[
{ label: "Collection", href: "/components" },
{ label: "Navigation", href: "/components?category=Navigation" },
{ label: "Breadcrumbs" },
]}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect navigation/Navigation.tsx
Source is included in the npm package under src/navigation/Navigation.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | {label: string; href?: string}[] | — | Ordered ancestry; the final item is current. |
| label | string | — | Navigation landmark name. |
Accessibility
Native links in an ordered list. The current page is announced; separators are hidden.
Motion
Static navigation.