Tree View
树形控件
Aliases:树形列表文件树目录树树结构tree
What is it
An expandable list that shows hierarchy as nested branches: each node folds or opens and its children indent underneath. Fits file directories, org charts and taxonomies. Nodes may be single- or multi-select, and expanded state stays independent of selection.
Name disambiguation
Tree may also mean a mind map or org chart; this entry covers the expandable, selectable list control.
Interactive playground
Try it. Make an informed choice.Expand and collapse branches, move with arrow keys and select a deep node.
Loading lab…
What to look for
- 01Expanded state and selected state are independent
- 02Keyboard focus walks parents, children and siblings in order
✓ When to use
- Data is naturally hierarchical — directories, org charts, taxonomies
- Branches must fold to manage a large number of siblings
- The nesting itself is part of the information
✕ When not to use
- Two shallow levels with few items — accordion or grouped list is lighter
- Hierarchy is site chrome rather than content — use a sidebar or menu
- A flat long list serves better — use a table or list
Variants
Single select
单选树
One node selected at a time, often feeding a detail pane
Multi select
多选树
Nodes checkable in batches, parents exposing an indeterminate state
File tree
文件树
Directory tree with type icons — the familiar product form
Implementation
padding-leftborder-lefttransformShow depth with recursive indent (padding-left or margin-left), optionally with guide rules. The twisty is a small triangle or plus/minus that rotates or swaps with state; collapsed subtrees hide visually while keeping tree semantics. Use a roving tabindex and let arrows walk visible nodes.
Platform API
role="tree"role="treeitem"aria-expandedIn code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| ARIA APG | Tree View |
| Radix Primitives | Collapsible |
| MUI | TreeView |
Related concepts
A vertical list of collapsible sections: clicking a header expands its content and clicking again collapses it, either exclusively (one open at a time) or independently. Packs grouped content into limited space for on-demand expansion.
ComponentsAlternativeA vertical navigation area pinned to one side of the page (usually the left), carrying the primary hierarchy of a product. The de facto standard of admin systems: brand and global search on top, module tree in the sidebar, content focused on the task.
ComponentsUsed withA temporary overlay listing actions, opened by click or right-click: flat or grouped command items that execute and close on selection. It houses infrequent actions (more, settings, delete), usually behind a "⋯" button or a context click.
ComponentsSimilarNot to be confused with
Accordion opens sibling sections; tree-view expresses parent-child nesting at any depth
Menu issues commands and navigation; tree-view browses and selects hierarchical data