UI components · Data display
Tree
Also called: Tree view, TreeView, Folder tree, Hierarchy tree
An indented list you can expand level by level, used to show data with parent-child relationships, like org charts, folders, or categories.
Click “Labeled” to see what each part is called.
How to tell AI
Swap in your own content firstPut a department tree on the left, indented in three levels: Company > Department > Team. Each node has an expand arrow and a checkbox in front of it. Checking a parent automatically checks all its children, and when only some children are checked, the parent shows a partially checked state. Add a search box at the top; typing highlights matching nodes and automatically expands their parents.
Send to
01Decide
Does your content look like this?
Check both columns to confirm Tree is what you need.
Use Tree when
- The data has clear parent-child relationships, like an org chart, folders, or product categories
- You need to check several nodes in hierarchical data at once, like when assigning permissions
- Users need to browse the overall structure and expand it level by level
Pick something else when
Not sure? Upload a screenshot and page analysis will check which layout each block should use.
02Pitfalls
Common misuse
It looks like it works, but it makes things harder for users.
- 01
Expanding thousands of nodes by default, so the page lags and nothing stands out
- 02
Only the small triangle expands a node; clicking the node name does nothing
- 03
Checking a parent doesn't update its children, and there's no partially checked state
03Spot it
How to spot it
Look at the overall structure first, then check a few features you can spot at a glance.
Structure
Nodes indented level by level. Each node has an expand/collapse arrow, an optional checkbox or icon, and the node name.
PartsClick one to highlight it in the wireframe above
04Explained
In detail
A tree draws data as a list indented level by level. Nodes that have children get a small triangle in front of them. Click it and the children show up, indented one step further to the right. It can also have checkboxes for multi-select (checking a parent checks all its children), support drag and drop to change levels, and load children only when a node is expanded. Typical uses: the folder list on the left of a file manager, picking people by department, and permission settings.
How it differs from similar components: a Cascader is a dropdown where you pick column by column to the right, like state → county → city, and end up with one value, so it suits forms. A Transfer is two lists side by side where you move items from left to right, good for picking a batch from a flat list. A tree lays out the whole hierarchy on the page, good for browsing the structure or checking nodes across several levels at once.
Developer infoTerm ID, DOM cues, match priority
- Term ID
component-tree- DOM selectors
The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).
[role="tree"].ant-tree.el-tree[class*="MuiTreeView-root"][class*="MuiSimpleTreeView-root"][class*="MuiRichTreeView-root"].arco-tree.t-tree.n-tree
- Priority
- 1 · when several match at the same level, the higher priority wins
- Version
- v2 · updated Sep 29, 2026