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.
You can say this to an AI Agent
Build the project browser as a tree: folders expand and collapse, files do not, indentation and icons expose levels, and expansion state persists. Test deep nesting, duplicate names, keyboard navigation, and narrow-screen indentation.
When to use it
- Folder browser▾📁 Design assets📄 Home.sketch📄 Icons.sketch▸📁 Asset library
- Organization chart▾Level 1 category▾Level 2 category▾Level 3 categoryLeaf node
- Nested category list▾🏢 Acme Tech▾DesignAlex Chen▸Engineering
- Any data with meaningful parent-child levels▾Page permissionsViewEdit
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 loadingProject AProject BProject CThere’s no parent-child hierarchy, so a list is enough
- Hide the current selection when branches collapse▾ Level 1▾ Level 2Level 3…Deep indentation narrows the content and truncates names
- Leave parent-child selection behavior unexplained▾Expand all▾NodeChild node▾NodeChild nodeWith everything expanded by default, relationships are hard to scan
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
Recommended tool
Web fine-tuning tool · Selector Pro
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗Further reading
Quick check