File Tree
Render recursive folder/file hierarchies for project structures, file explorers, or repository views with expand/collapse, guide lines, custom icons, and full keyboard-accessible WAI-ARIA tree semantics.
Pro features
What the Pro version adds to this component.
Recursive Hierarchy
Render arbitrarily deep folder/file structures from a single data array.
Flexible Expansion
Start collapsed, fully expanded, or open specific folders by id via defaultExpanded.
Guide Lines
Optional left indentation lines that make nested relationships easy to scan.
Selection Callback
onNodeSelect reports the activated node so you can build interactive explorers.
Custom Icons
Override the default folder/file icons per node to signal file types.
Full Arrow-Key Navigation
Arrow keys walk the visible rows, open and close folders, and step in and out; Home/End jump to the ends.
WAI-ARIA Tree
role=tree/treeitem/group with aria-expanded, aria-selected, aria-level/posinset/setsize and roving tabindex.
Installation
Install via CLI
npx @moontra/moonui-cli add file-treeUsage
Examples
Project Tree
A realistic Next.js project structure. Pass an array of ids to defaultExpanded to open specific folders on mount while leaving the rest collapsed.
Fully Expanded
Set defaultExpanded to true to open every folder in the tree at once — ideal for showing a complete file map.
Without Guide Lines
Disable the left indentation guide lines with showLines={false} for a cleaner, minimal look.
Custom Icons & Selection
Override the default folder/file icons per node with the icon prop, and react to clicks with onNodeSelect to build interactive explorers.
Controlled Expansion
Provide expandedIds to make the parent the single source of truth for which folders are open. Here two real MoonUI buttons expand or collapse everything at once, in-tree clicks flow back through onExpandedChange, and onNodeToggle reports the most recently toggled node. Give every node a stable id — controlled mode keys off node.id.
Keyboard Navigation & Controlled Selection
The tree implements the full WAI-ARIA tree keyboard contract: the whole tree is a single tab stop (roving tabindex), then Arrow Up/Down walk the visible rows, Arrow Right opens a folder or steps into it, Arrow Left closes it or steps out to the parent, and Home/End jump to the first/last visible row. Pass selectedId to keep the highlighted row owned by your own state.
Compact Size
Switch to size="sm" for dense listings — sidebars, file pickers, or anywhere the tree shares space with other panels.
Raw Right-Click Callback
Skip the built-in menu entirely: onNodeContextMenu hands you the node and the raw MouseEvent so you can position your own menu, open a drawer, or fire an analytics event. It fires independently of renderNodeMenu.
Right-Click Context Menu
Opt in with renderNodeMenu to wrap each node in a real ContextMenu — right-click a file or folder for Rename / New File / Delete actions. Left-click still toggles and selects; you own the menu items (import ContextMenuItem from @moontra/moonui-pro).