Description
A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.
 |
Types
Image | |
Single selection | |
Multiple selection |  |
Smart Selection |  |
Usage & Behavior
Trees are used to navigate within hierarchical lists of objects (e.g. organizations), and then to select one or more items in order to filter content or show additional information.
They usually appear inside a Filter Pane, a Details Panel, or a Widget.
General guidelines
Structure
 |
The tree consists of:
Leaf nodes
A leaf node is an object that contains data.
Each leaf node consists of:
a title. Long titles can be truncated and a Tooltip can be used on hover.
an optional icon, representing the node's type (e.g. a document). If all nodes are of the same type, the icon should not be used.
Where a leaf node represents an employee, an avatar image may appear instead of an icon.
Container nodes:
A container node is an object containing other items (e.g. a folder).
Each container node consists of:
a triangle toggle button, to the left of the title.
an icon.
a title.
Container nodes have 2 states:
Collapsed, when all child items are hidden. In this case, the triangle toggle button points towards the node title.
Expanded, when all or some levels of child items are shown. In this case, the triangle toggle button points downwards.
If the icon representing a container node is a folder, it may also have the 2 states, closed (when collapsed) and open (when expanded).
A root node (optional)
A single node that appears at the top of the tree and contains all other nodes.
It appears only when relevant, or when the user is allowed to select all items at once.
Multiple Selection
Where multi-selection is used, each node will have a Check Box, allowing the user to select and deselect it.
Default State
Where a root node exists, it will be expanded by default, showing additional levels of nodes as needed.
Where there is no root node, the list will have at least the first node expanded. The state of other nodes will be determined as needed.
Content
In most cases, nodes should be ordered alphabetically, to allow users locating specific items quickly.
Other cases may include logical, chronological or numeric orders.
States
Container Node | Leaf Node | |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Selected |  |  |
Disabled | NA |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled | NA |  |
Interaction
Since a tree is an instance of a list, please refer to list interactions.
Hovering over a truncated node title will show a Tooltip containing the full title.
Clicking a triangle toggle button or double-clicking a container node will:
toggle the triangle button between states.
toggle the node between the collapsed and expanded states. When loading the content of the node takes more than 1 second, a Progress Indicator will appear.
Where multiple selection is used:
Clicking a check box will select or deselect the item, including all child items if exist.
If only some of the child items are selected, the parent item will be partially selected.
For reordering items, please refer to the Drag and drop.
Best practices
Use:
when there is a need to select one or more items in a hierarchical list.
Don't use:
where there is no hierarchy → use a List instead.
General
Avoid using too many hierarchy levels.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
Zeplin link | Screen thumbnail |
|---|---|
Single Select |  |
Multi Select |  |
Smart Select |  |
Tree - Organization |  |
Code
