What is Tree view?

A tree view shows hierarchical data as indented, collapsible branches: folders and files, an organization chart, a table of contents, categories and subcategories, a component tree in dev tools. Each node with children has a disclosure arrow; opening it reveals the children one level deeper, and the indentation shows depth. The pattern lets people navigate thousands of items by opening only the branches they care about, which is why it survives in every IDE, file manager and admin console.

When to use it

• Real hierarchies three or more levels deep that users browse, such as files, pages or nested settings.
• Not for flat lists with categories. Two levels is a list with group headings, or an accordion.
• Not for navigation menus with a few sub-items; a nested nav with disclosure buttons is simpler and keeps link semantics.
• Selection can be single (the current file) or multiple with checkboxes (choosing folders to sync). Decide which before building, since the keyboard model differs.

Accessibility

The WAI-ARIA tree view pattern is one of the more demanding ones. The container has role="tree", each node is role="treeitem", child lists are role="group", and expandable nodes carry aria-expanded. Selected nodes use aria-selected. The tree is a single Tab stop with a roving tabindex, and the arrow keys do the navigating:

• Down and Up Arrow move to the next and previous visible node, across branches.
• Right Arrow opens a closed node, or moves to its first child when it is already open. Left Arrow closes an open node, or moves to the parent when it is closed.
• Home and End jump to the first and last visible node. Typing a character jumps to the next node starting with it.
• Enter activates the node; Space toggles selection in a multi-select tree.
• Asterisk expands every sibling of the focused node.

Depth and position are conveyed by the nesting of groups, or explicitly with aria-level, aria-setsize and aria-posinset when the DOM is flattened for virtual scrolling. Icons on nodes are decorative; the node's text is its name.

How to build one in React

MiniDev's TreeView renders the tree, treeitem and group roles with aria-expanded from a nested array of nodes:

import { TreeView, type TreeNode } from "@/components/ui/tree-view"

const NODES: TreeNode[] = [
  {
    id: "src",
    label: "src",
    children: [
      { id: "app", label: "app", children: [{ id: "layout", label: "layout.tsx" }] },
      { id: "components", label: "components", children: [{ id: "button", label: "button.tsx" }] },
    ],
  },
  { id: "package", label: "package.json" },
]

export function SourceTree() {
  return <TreeView nodes={NODES} />
}

Load children lazily for large trees by fetching a branch when it is first opened, and keep open state in a map keyed by node id so it survives re-renders and data refreshes. Past a few thousand visible nodes, flatten the visible rows and virtualize them. FileTree adds file icons, git status and the full tree keyboard model above, and OrgChart draws a hierarchy as boxes with arrow key navigation. See the navigation category for more.