Tree View
A Tree View is a hierarchical structure that visually represents the relationship between levels and sub-levels.
- Overview
- Specs
- Guidelines
Component
A Tree View component is a hierarchical navigation interface commonly used to display and interact with structured data in a nested, tree-like format.
Visually, a Tree View typically consists of a vertical list of expandable/collapsible nodes, where each node represents a parent item that may contain one or more child items.
Users can interact with the nodes by expanding or collapsing them to reveal or hide their child nodes, enabling them to navigate through multiple levels of data hierarchy.
- 1: First Level Entry
- 2: Second Level Entry
- 3: Third Level Entry
- 4: Forth Level Entry
- 5: Fifth Level Entry
- 6: Expand/Collapse Icon
- 7: Node Icon
- 8: Label
- 9: Advanced Interactions
- 10: Tag
Used for:
Hierarchical Data
When your application needs to display data with hierarchical relationships, such as file directories, organizational structures, a Tree View provides a clear and intuitive way to visualize and navigate through the data.
Multi-Level Navigation
Tree Views are ideal for representing data with multiple levels of depth. They allow users to expand and collapse nodes to drill down into subcategories or navigate back to higher-level parent nodes. To ensure clarity, icons are displayed only at the first two levels of the hierarchy. Deeper levels remain text-based to avoid visual clutter.
Customization
Tree Views can be customized to match the visual style and branding of your application, with options to customize node appearance, icons, tooltips, and contextual actions.
Visual Hierarchy
Tree Views visually represent the hierarchy of data, making it easy for users to understand the relationships between different levels of information and providing a clear overview of the overall structure of the dataset.
Don’t use for:
Flat data structures
If your dataset has a flat or shallow structure with no meaningful hierarchical relationships, using a Tree View may introduce unnecessary complexity.
Complexity overload
In some cases, presenting data in a hierarchical format may overwhelm users, especially if the hierarchy is deep or complex. If users struggle to understand or navigate the data hierarchy effectively, consider simplifying the presentation.
Performance concerns
Tree Views can impose performance overhead, particularly when dealing with large datasets or complex interactions. If performance is a critical concern, consider using a load more button for incremental data addition.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Added sizes;
- Updated selected and hover selected states;
- Added guidelines for horizontal scroll;
- Added load more guidelines.
