Tree Navigation
A collapsible nested navigation tree with WAI-ARIA arrow-key navigation, badges and controlled selection.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
TreeNavProps
Also accepts all props of Omit<React.ComponentProps<"ul">, "defaultValue" | "onChange">
| Prop | Type | Default | Description |
|---|---|---|---|
| items* required | TreeNavItem[] | — | — |
| value | string | — | Selected item id (controlled) |
| defaultValue | string | — | — |
| onValueChange | (id: string) => void | — | — |
| expanded | string[] | — | Expanded item ids (controlled) |
| defaultExpanded | string[] | [] | — |
| onExpandedChange | (ids: string[]) => void | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/tree-nav.json