Toggle Sidebar B
AppearanceLight & dark mode D
Branched Menu
Collapsible menu whose sections unfold into a trunk with a curved branch to each child, and an accent line that travels down the trunk and around the curve to whatever you pick, while a marker glides to the open section.
Default
Fold a section open or shut, then pick a child to watch the accent line travel to it.
API Reference
BranchedMenu
| Prop | Type | Default | Description |
|---|---|---|---|
items | BranchedMenuItem[] | DEFAULT_ITEMS | Sections: label plus children (value, label, icon as an Iconify name), or a leaf with a value. A section with children folds; a leaf selects. |
defaultOpen | number | number[] | 0 | The section, or sections, open at first. -1 for none. |
defaultActive | string | '' | Value selected at first. Empty picks the open section's first child. |
color | string | '#f5f5f5' | The ink. Lines and idle text are mixes of it. |
accentColor | string | '#f5f5f5' | The active line, the active label and the marker. |
lineColor | string | '#3f3f46' | The rail, trunk and branches. A solid colour, so joints never darken. |
width | number | 240 | The widest the menu may be, in px. It shrinks to its content. |
rowHeight | number | 36 | Height of a child row in px. |
indent | number | 40 | Where child rows start, in px. Branches end just before it. |
trunk | number | 14 | The trunk line's x position, in px. |
radius | number | 10 | The curve of each branch, in px. |
lineWidth | number | 1.5 | Stroke width of the lines. |
fontSize | number | 14 | Child text size in px. Headers are 1px larger. |
drawDuration | number | 400 | The accent line's travel, in ms. |
foldDuration | number | 300 | A section's fold and unfold, in ms. |
| Event | Description |
|---|---|
select | A child or a leaf was picked. Carries (value, item). |
toggle | A section folded or unfolded. Carries (index, open). |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Moves between section headers and the children of open sections. |
| Enter + Space | Folds a section or picks a child. |
- Section headers carry aria-expanded and the picked row carries aria-current. Children of a folded section are skipped by Tab.
- With prefers-reduced-motion the fold and the accent line jump to their end state.