Tree

Open in Playground

nodes: [{ key, label, children? }]. Keyboard: Up / Down move, Right expands or enters, Left collapses or goes to the parent, Enter selects. Pass defaultExpanded (keys), or control it with expanded + onExpandedChange.

lair
Banana.jsx
gadgets
plans.md

Props

nodes{ key, label, children? }[]
Tree data.
selectedstring
Selected node key.
onSelect(key) => void
Called when a node is selected.
defaultExpandedstring[]
Default: []
Initially expanded keys (uncontrolled).
expandedstring[]
Expanded keys (controlled).
onExpandedChange(keys) => void
Called when expansion changes.
labelstring
Default: 'Tree'
Accessible name.
renderLabel(node, depth) => ReactNode
Custom row content, e.g. a link or different styling per level.
classNamestring
Default: ''
Extra classes for the root element.

Tree props
Prop	Type	Default	Description
`nodes`	{ key, label, children? }[]	–	Tree data.
`selected`	string	–	Selected node key.
`onSelect`	(key) => void	–	Called when a node is selected.
`defaultExpanded`	string[]	`[]`	Initially expanded keys (uncontrolled).
`expanded`	string[]	–	Expanded keys (controlled).
`onExpandedChange`	(keys) => void	–	Called when expansion changes.
`label`	string	`'Tree'`	Accessible name.
`renderLabel`	(node, depth) => ReactNode	–	Custom row content, e.g. a link or different styling per level.
`className`	string	`''`	Extra classes for the root element.