Root Nav
Web (React)
A docs-style navigation tree whose hairline roots draw out to each open chapter.
Chapters open and fold under mono headings, and a hairline root draws from the trunk to each page, with the active page's root inked in the accent colour. Use it as the sidebar of a docs site or any shallow two-level tree.
Installation
CLI
npx @modus-ui/cli add root-navManual
- Copy the code from the component tab.
- Create a file at
components/ui/root-nav.tsx. - Paste the code.
Usage
tsx
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | any | DEFAULT_ITEMS | - |
| defaultOpen | number | 0 | - |
| defaultActive | string | "" | - |
| onSelect | any | - | - |
| onToggle | any | - | - |
| color | string | "hsl(var(--foreground))" | - |
| accentColor | string | "hsl(var(--primary))" | - |
| lineColor | string | "hsl(var(--border))" | - |
| width | number | 240 | - |
| rowHeight | number | 36 | - |
| indent | number | 36 | - |
| trunk | number | 14 | - |
| radius | number | 4 | - |
| lineWidth | number | 1.5 | - |
| fontSize | number | 14 | - |
| drawDuration | number | 400 | - |
| foldDuration | number | 300 | - |
Comments