Tree view
A nested list of expandable rows, like a file explorer sidebar: each twisty arrow opens the children underneath it.
See it
What it is
A tree view shows a hierarchy as indented rows, each parent carrying a disclosure triangle (the 'twisty') that reveals its children in place. The canonical examples are the Finder and Windows Explorer sidebars, the VS Code file tree, and the Figma layers panel.
Reach for it when the nesting itself is information: file paths, org charts, category taxonomies, a DOM or JSON inspector. If your data is two levels deep and flat-ish, a sidebar with grouped headings or an accordion reads better and costs less to build.
Gotcha: a tree is not a nested list of links. The ARIA pattern is a single tab stop with roving focus, where up and down move between visible rows, right expands or descends, and left collapses or climbs. Two more traps: indentation eats horizontal space fast, so cap depth or let the panel scroll sideways, and a tree with thousands of nodes needs lazy-loaded children plus virtualization or the first expand will freeze the page.
Ask AI for it
Build a tree view component: recursively rendered rows with 16px of indentation per level, a rotating chevron on any row that has children, and an optional icon plus label. Use role='tree' on the container, role='treeitem' with aria-expanded and aria-level on rows, and role='group' on child lists. Implement roving tabindex so the whole tree is one tab stop: ArrowDown and ArrowUp move through visible rows, ArrowRight expands then descends, ArrowLeft collapses then climbs, Home and End jump to the ends, Enter selects. Persist expanded state by node id and animate the disclosure with a short height transition.