Pagination Rail
NavigationA raised selection moves through a compact row of numbered page controls.
Stacked Breadcrumbs
Layered chevron tabs create a compact trail with a distinct current page.
LIVE PREVIEWInteract with the component
Just React. No extra dependencies.
CSS ModulesCopy the component and its CSS module into your project.
Usage
Matches your current playground settings.
jsx
import StackedBreadcrumbs from "./StackedBreadcrumbs";export default function Example() {return (<StackedBreadcrumbsitems={[{"id": "home","label": "Home","href": "/"},{"id": "collection","label": "Collection","href": "/components"},{"id": "cards","label": "Cards","href": "/categories/cards"}]}label={"Breadcrumb"}color={"#cbb399"}background={"#2d2721"}/>);}
Using Stacked Breadcrumbs
Pass the hierarchy in order through items, with an href for every ancestor. The final item is rendered as the current page rather than a link.
The trail scrolls horizontally in narrow containers. Labels, links and the accessible navigation name all come from props.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | Array<{ id?, label, href? }> | No | [] | Ordered path items; provide href for every item except the last. |
| label | string | No | "Breadcrumb" | Accessible navigation label. |
| color | string | No | "#cbb399" | Current-page background colour. |
| background | string | No | "#2d2721" | Ancestor-link background colour. |
| className | string | No | "" | Additional classes on the root element. |
| style | CSSProperties | No | undefined | Inline styles for sizing, typography and appearance. |