Tree
You might say
Make it work like folders: click the little arrow to expand the next level.
Expand and browse data with parent-child levelsA tree reveals folders, departments, categories, and other hierarchies by expanding and collapsing levels. It may support browsing, selection, or dragging. For permissions and selection, explain clearly how parent and child nodes affect each other.
When to use it
- Folder browser
- Organization chart
- Nested category list
- Any data with meaningful parent-child levels
When NOT to use it
- Turn a simple flat list into a treeProvince / City / DistrictGuangdong ProvinceShenzhenNanshan District
- Open a very large tree without search or lazy loading
- Hide the current selection when branches collapse
- Leave parent-child selection behavior unexplained
Anatomy
▾Design Department▸UI Group
The container for the whole tree
Shown only for parent nodes; click to expand or collapse
The node name; it can be highlighted
Indent one level to show the parent-child relationship
Variants
Checkable
▾Page permissions
View
Edit
To select items by hierarchy, such as when assigning permissions
ShowLine
▾Design Department
▸UI Group
▸User Research Group
When parent-child relationships need to be easier to scan
Directory
▾📁 Design resources
📄 Home.sketch
📄 icon.sketch
Use folder icons to make a file hierarchy easier to scan
Typical use cases
File browser
Department tree
Select approver
▾🏢 XX Technology
▾Design Department
Alex Chen▸R&D Department
Category manager
Role permissions · Operation3 / 6 items selected
▾Content management
Publish article
Delete other people’s articles
▸Data dashboard
Permission editor
Product Category
▾Digital home appliances128 itemsEdit
Headphone Speaker46 items
Smart Wear32 items
▸Home Life96 items
Further reading