An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.
ts
| Guidance | Practices |
|---|---|
| Do | Provide meaningful labels and icons for each node to make the hierarchy easy to scan. |
| Do | Pre-expand important branches so users see key content immediately. |
| Don't | Nest more than 4–5 levels deep; flatten the structure or use a different pattern. |
| Don't | Use a tree for flat, non-hierarchical data; use a List instead. |
File browser tree with folder and document icons distinguishing directories from files.
Settings tree with clickable items and a documentation link.
Navigation tree with a selected item for the current page.