Data Display

Tree

A hierarchical tree view for file explorers, nested navigation, and category pickers. Expand/collapse, single selection, icons, and full keyboard support following the ARIA tree pattern. Expanded and selected state can be controlled or uncontrolled.

Sourcesrc/components/ui/tree.tsx

Click to select and expand; focus the tree and use the arrow keys to navigate.

src

components

button.tsx

tree.tsx

index.ts

assets

README.md

selected: tree

Import

import { Tree } from "@mikenotthepope/substrateui"

Keyboard

↑ / ↓ — move between visible nodes.

→ — expand a collapsed node, or move to its first child.

← — collapse an expanded node, or move to its parent.

Enter / Space — select (and toggle a parent).

Home / End — jump to the first / last visible node.

Accessibility

The tree implements the WAI-ARIA tree pattern: role="tree" with treeitem children carrying aria-expanded, aria-selected, and aria-level. A roving tabindex keeps a single stop in the tab order, and full arrow-key navigation is provided.

API Reference

Prop	Type	Default	Description
`data`	`TreeNode[]`	—	Hierarchical nodes: { id, label, icon?, children?, disabled? }.
`defaultExpandedIds`	`string[]`	`[]`	Ids expanded initially (uncontrolled).
`expandedIds`	`string[]`	—	Controlled set of expanded ids.
`onExpandedChange`	`(ids: string[]) => void`	—	Called when the expanded set changes.
`defaultSelectedId`	`string \| null`	`null`	Selected id initially (uncontrolled).
`selectedId`	`string \| null`	—	Controlled selected id.
`onSelect`	`(id: string) => void`	—	Called when the selection changes.