What it does
TreeView turns an array of nested nodes into an accessible tree with expandable branches and selectable leaves.
It manages expansion and selection state (controlled or uncontrolled), roving tabindex focus, and full keyboard navigation, while leaving node rendering open through renderNode.
Composition and API
Pass a data array of nodes, each with an id, label, optional icon, optional disabled flag, and optional children. Use defaultExpanded or expanded for expansion, defaultSelected or selected for selection, and onSelect and onExpandedChange for events. Variants such as appearance, size, and showGuides theme the container and indentation.
Common use cases
Use TreeView for file and folder explorers, nested navigation, settings categories, taxonomy editors, and org charts. The renderNode prop lets each row carry icons, badges, counts, or inline actions while the component keeps accessibility and keyboard behavior consistent.
Accessibility
The container uses role=tree and each node uses role=treeitem with aria-expanded, aria-selected, aria-level, and aria-disabled. A roving tabindex keeps one node in the tab order, and arrow keys, Home, End, Enter, and Space follow the WAI-ARIA tree interaction pattern.
Next.js integration notes
TreeView ships as a client-safe package entry because it owns focus and keyboard state. Render it inside App Router preview pages while keeping SEO content server-rendered, and reach for the ui/tree-view/animated entry only when you want motion on expand and collapse.
FAQ
Is TreeView keyboard accessible?
Yes. TreeView implements the WAI-ARIA tree pattern: arrow keys move between visible nodes, ArrowRight expands or steps into children, ArrowLeft collapses or steps to the parent, Home and End jump to the first and last node, and Enter or Space selects.
How do I control which nodes are expanded?
Pass defaultExpanded for uncontrolled state, or expanded plus onExpandedChange for controlled state. Selection works the same way with defaultSelected or selected plus onSelect.
Does the animated variant require Framer Motion?
Only the animated entry imports framer-motion. Import TreeView from ui/tree-view for the static version, or TreeViewAnimated from ui/tree-view/animated for spring-based expand and collapse.