Description
A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.
 |
Types
Single selection tree | |
Multiple selection tree |  |
Usage & Behaviour
The tree is 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.
It usually appears inside a Filter Pane, a Details Panel or a Widget.
General guidelines
Structure
The tree consists of:
Leaf nodes
A leaf node is an objects that contains data
Each leaf node consists of a title and an optional icon, representing its type (e.g. a document). If all nodes are of the same type, the icon should not be used.
In case 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 objects (e.g. a folder).
Each container node consists of a triangle toggle button, an icon and a title.
The container node has two states:
Collapsed - when all children object are hidden. In this case, the toggle button points to the title of the object
Expanded - when all or some levels of children objects are shown. In this case, the toggle button points down.
If the icon representing a container mode is a folder, it may also have to states: closed and open respectively.
In some cases, a counter will appear next to the node title, showing the number of contained objects.
A root node (optional)
This is a single node that appears at the top of the tree and contains all other nodes.
It appears when it is relevant or when the user is allowed to select all objects at once.
 |
Multiple Selection
In case of multiple selection, each node will have a checkbox, allowing the user to select and deselect it.
Default State
If a root node exists, it will be expanded by default, showing the second level of nodes.
If there is no root node, the list can be either entirely expanded, entirely collapsed or showing the only first node expanded and other nodes collapsed - all according to the specific needs.
Content
Nodes should be ordered alphabetically, to allow users locating specific objects quickly.
An exception to this guideline are time-related objects, that should be ordered chronologically, with the most recent item first.
Logical: Sort items into a meaningful order. Group related options together and show the most common options first, followed by less common options.
Alphabetical: Sort the options alphabetically if more than 8 select options are available. This helps the user find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric:Sort numeric values into a sequential order, with the lowest number first.
Chronological:Sort time-related information into chronological order, with the most recent first.
States
Regular |  |
Hover |  |
Active |  |
Disabled | |
Focused |  |
Focused, Hover | |
Focused, Active | |
Focused, Disabled |
Interaction
You can click on the entire label
Click on the expand/collapse toggle will do the respective action.
Click on the node label (+counter) will select the node
Double-clicking the container node will expand/collapse the node
When the label is truncated (node name), hovering over it will show a tooltip with the full label
When a user expands a node if the nodes are not shown immediately, provide a "loading" indication at the place below the expanded node.
Selecting:
Single select: One item of the tree can be selected. To select an item, click anywhere on the item row.
Multiple selections: Allow the selection of one or more items. For this, the tree provides checkboxes on the left side of each line item. Each item is selected independently of the others
Single Selection | Multiple Selection Mode |
|---|---|
Single selection is activated by selecting the node label. Selecting the node label will select the node and un-select previously selected node. | On mouse hover a node, a check box is displayed. If the user checks it he is placed in a multi selection mode. Multi selection mode can also be activated by using Ctrl/Shift while selecting the node label. On this mode, clicking the label/check box will perform multi select. Only once the apply is pressed the action is executed (whatever the corresponding action is). Selecting a parent node through the check box will select its descendants as well. Unselecting some of the descendants will place the parent node in mixed state. |
Drag and drop, Please refer to the Drag and drop pattern
Best practices
Use:
when there is a need to select one or more items from a hierarchical list.
Do not use:
Where there is no real hierarchy → use a List instead
to select values in a form or where the number of items is small → use a Drop-down Menu instead
General:
Tree may need to be 3, 4, or even 5 levels deep. But if you have 15-20 levels of depth it suffers usability
In case of a long list add a Search component.
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
