Pagination Rail
NavigationA raised selection moves through a compact row of numbered page controls.
Folding Menu
Numbered navigation panels unfold beneath a compact, tactile trigger.
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 FoldingMenu from "./FoldingMenu";export default function Example() {return (<FoldingMenutrigger={"Explore the studio"}items={[{"id": "work","label": "The collection","description": "Browse every component","href": "/components"},{"id": "backgrounds","label": "Backgrounds","description": "Set the atmosphere","href": "/categories/backgrounds"},{"id": "about","label": "About the library","description": "How it all works","href": "/about"}]}defaultOpen={true}label={"Studio navigation"}color={"#c1b1d4"}background={"#29242f"}/>);}
Using Folding Menu
Provide real destinations through items and a trigger label that describes the navigation. The menu expands in normal document flow, so allow space below it.
Closed links are inert and hidden from assistive technology. Escape closes the menu and restores trigger focus; outside pointer interaction also dismisses it.
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| items | Array<{ id?, label, href, description? }> | No | [] | Navigation links and optional supporting descriptions. |
| trigger | ReactNode | No | undefined | Trigger button content. |
| open | boolean | No | undefined | Controlled expanded state. |
| defaultOpen | boolean | No | false | Initial uncontrolled expanded state. |
| onOpenChange | function | No | undefined | Receives the requested expanded state. |
| onSelect | function | No | undefined | Receives the clicked item and event; preventDefault can override navigation. |
| label | string | No | "Navigation" | Accessible navigation name and fallback trigger label. |
| color | string | No | "#c1b1d4" | Trigger and focus colour. |
| background | string | No | "#29242f" | Unfolded panel colour. |
| className | string | No | "" | Additional classes on the root element. |
| style | CSSProperties | No | undefined | Inline styles for sizing, typography and appearance. |