Jovin LiewWhat is a tree component?
A tree visualizes the hierarchical structure of nodes / nested items.
-
A tree view commonly comes with parent nodes and child nodes, and sometimes even nested levels (child-child nodes, etc) - it is a good way to visualise data with hierarchy requirements.
-
The parent node is often referred to as the 'root node', and child nodes are sometimes referred to as 'leaf nodes'.
-
It is common for parent nodes to expand or collapse to reveal or hide the child nodes - similar to how accordions work.
A tree is commonly used in the following design patterns: Navigation, Filtering & sorting, Commenting.
Examples of tree structure with parent node and child node.| When to use a Tree? | ||
|---|---|---|
| Hierarchical data | Tree views are ideal for displaying nested structures like folders, categories, or organizational charts. | |
| Expand or collapse nodes | Use them when users need to explore content progressively, and a expanded or collapsed view helps them navigate more efficiently (i.e: file systems, product categories). | |
| Frequent navigation through structured content | Works well for apps or systems where users regularly explore data hierarchically. | |
| When not to use a Tree? | ||
|---|---|---|
| Flat or simple data | Avoid if there is no need for hierarchy. And, if information can be displayed in a List or Grid for easier readability. | |
| Too many levels of nesting | Avoid if it creates confusion or overwhelming complexity for users. | |
| Mobile interfaces | Try to avoid on mobile interfaces as it introduces too much cognitive overload on a small surface. | |
What is the anatomy of a tree?
Anatomy of a treeWhat are the design variants of a tree?
We studied over 400+ tree UI components on Mobbin, from real-world examples and found the following variants.
1. Tree nodes commonly come with icon and text
Adding icon and text to parent nodes and child nodes help to create more visual contrast in the folder structure.
In fact, it is common to have different icons on the parent node v.s. the child node in the tree view to better contrast the hierarchical relationship between the two node types.
Here are some examples of a tree view that comes with icons and text.
Examples of tree nodes with icon and textYou can also opt to not use icons on every single node of the tree.
Examples of tree nodes without icons2. Tree nodes sometimes come with checkboxes too
Similar to a list view, it is common for tree views to come with checkboxes if there is a need to have selected nodes for bulk user actions like moving, deleting, editing items.
Examples of tree nodes with checkboxes3. Using tree nodes for conversations
This is a common design pattern for forum-based apps like Reddit, or threaded comment design patterns. Having a tree design allows these conversations to be collapsible, similar to an accordion - which allows users to quickly filter through and find comment threads that are relevant for them.
Examples of tree nodes for conversationsWhen to use a tree component?
1. Navigation
A tree structure is commonly used for navigation on websites, allowing users to easily explore different categories or sections of the website.
On Mobbin, we use the tree view specifically for the flows section to highlight to hierarchical information architecture of each website. Clicking on a specific node in the tree navigates the users to the appropriate content.
Navigational tree views commonly come in form of Table of Contents on blog pages on websites.
Examples of tree nodes used for navigation.2. Filtering & sorting
In e-commerce or product listing websites, a tree structure can be used for filtering and sorting products based on different categories, such as price, brand, or size.
Examples of tree nodes used for filtering & sorting3. Comments
On threads or forums, replies and comments can be arranged in a tree for easier viewing. For example, a comment can be expanded to multiple replies from other users.
The best example of this is Reddit, tree view in the comments section handles huge volumes of comments elegantly - and the tree nodes often have many nested levels. Users can easily expand or collapse different root nodes to see relevant comments that they might be interested in.
Examples of tree nodes used on comment sections