Tree View
ProAn expandable, hierarchical list for displaying nested data like file systems, categories, and organisational structures. Each node can be expanded or collapsed to reveal children. Supports single and multi-selection, drag-and-drop reordering, and lazy loading of deep branches.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard tree view with expandable/collapsible nodes. | Use for file browsers, category trees, and organisation hierarchies. |
| With Checkboxes |
Usage Guidelines
Do
Use role="tree" on the container and role="treeitem" on each node.
Don't
Nest more than 5–6 levels deep — consider a different navigation pattern.
Do
Set aria-expanded="true" or "false" on expandable nodes.
Don't
Auto-expand all nodes on load — start collapsed and let users explore.
Do
Indent child nodes visually and semantically with aria-level.
Don't
Use a tree view for flat lists — use a standard list instead.
Code
Design Tokens
Accessibility
- Container must use role="tree"; each node uses role="treeitem".
- Expandable nodes need aria-expanded="true" or "false".
- Use aria-level to indicate depth for screen readers.
- Group child nodes with role="group" inside the parent treeitem.
- Selected nodes use aria-selected="true".