Tree nav
Workspace page tree with nested expandable pages, page icons, hover + to add a child, drag to reorder within a level and the full keyboard tree pattern.
Preview
Page
Task board
- Drag a row to reorder it within its level, or Alt + ↑/↓.
- Hover a row and press + (or the + key) to add a page inside it.
- → opens a level, ← closes it or steps out.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| nodes | TreeNode[] ({ id; title; icon?; children? }) | — | The page tree (controlled). |
| onNodesChange | (nodes: TreeNode[]) => void | — | Called with the whole tree after a drag or Alt+↑/↓ reorder. |
| value / onSelect | string / (id: string) => void | — | Current page; selected by click, Enter or Space. |
| defaultExpanded | string[] | [] | Pages open on first render. |
| onAdd | (parentId: string) => void | — | Shows the hover "+" (and the + key) to add a child page. |
| label | string | "Pages" | Accessible name of the tree. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.