| Table of Contents |
|---|
Description
A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.
...
Types
Usage
Image |
Single selection |
 |
Multiple selection |
For multiple selection trees, smart selection mode will be applied. See the Interaction section of Lists for more information.
 | |
Smart Selection |  |
Read-only |  |
Dependencies between nodes | .png?version=2&modificationDate=1700487901115&cacheVersion=1&api=v2&width=250) |
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
...
A tree consists of :Leaf multiple 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 its 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.
Where multi-selection is used, each node will also have a Checkbox, allowing the user to select and deselect it.
Root, parent, and dependent parent nodes have additional features and behaviors.
...
See below.
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.
Standard parent nodes:
A container parent node is an object containing other items (e.g. a folder).
Each container parent node consists of:
a triangle toggle button, to the left of the title.
an icon.
a title.
Container Standard parent 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.
Child nodes will be:
shown below their parent node.
indented relative to their parent node.
If the icon representing a container parent node is a folder, it may also have the 2 states, ; closed (when collapsed) and open (when expanded).
In some cases, a counter will appear next to the node title, showing the number of contained items.
A root node (optional)
A single node that appears at the top of the tree and contains all other nodes.
It appears 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 which appears on hover, allowing the user to select and deselect it.Dependent parent nodes
Where a parent node depends on a child node, and is automatically selected when the child is selected, it is known as a dependent parent node. For example, in a permissions tree, enabling the child node Edit may also automatically enable the dependent parent node View.
The children of a dependent parent node will be:
shown below it.
indented relative to it.
connected to it with a line, terminating in a dot to the left of the dependent parent node.
Where a tree has both standard and dependent parent nodes, all standard parent nodes will be displayed in bold.
Note: dependent parent nodes are not collapsible and do not have a triangle toggle button.
Regular dependency indication | Hovered dependecy indication |
|---|---|
 |  |
Default State
Where a root node exists, it will be expanded by default, showing the second level additional levels of nodes as needed.
Where there is no root node, the list can be either entirely expanded, entirely collapsed, or have only will have at least the first node expanded and the other nodes collapsed. This depends on the specific needs and expected usage.
Content
Nodes should be ordered alphabetically, to allow users locating specific items quickly.
An exception to this is time-related lists, which should be ordered chronologically, with the most recent item first.
Logical. Sort options into a meaningful order. For example, group related options together, and order by the most common to least common.
Alphabetical. If there are more than 8 options available, sort them alphabetically. This helps the user to find the right option quickly. Sort currencies, names, and similar content alphabetically.
Numeric. Sort numeric values in 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
. The state of other nodes will be determined as needed.
Content
For trees shown within a narrow panel:
where there is not enough space to show a full node label, it will be truncated with ellipses. The full label will be shown in a Tooltip on hover.
for nodes in expanded lower levels where thelabel is notvisible at all, a horizontal Scrollbar will be added to the panel.
Where Checkboxes are included in the tree, they will be static on the left-hand side and not disappear on scroll.
Internal logic
In most cases, nodes should be ordered alphabetically, to allow users to locate specific items quickly.
Other cases may use logical, chronological, or numeric ordering.
States
Parent node | Standard 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 on a node (including the title and the icon) will select it. Any previously-selected nodes will automatically be deselectedstandard parent node will:
select that node.
expand the node. If the node is already expanded, clicking it will not collapse back.
Clicking a triangle toggle button or double-clicking a container node will:
Where multiple selection is used:
Clicking clicking a check box checkbox will select or / deselect the item, including .
clicking the checkbox for a standard parent node will also select/deselect all child items where they exist, regardless of other selections.
If if only some of the child items are selected, the parent item will be in a show as partially selected state.
See the Interaction section of Lists for more information on selecting items.
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.
Don't 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
Try to avoid trees with too many hierarchy levels. How many are reasonable?
An optional Search field can be used for large trees, to help the user find items easily.
Accessibility compliance
...
.
a “Select all” checkbox is optional.
For reordering items, please refer to the Drag and drop page.
Dependent parent nodes will automatically be selected when a relevant child node is selected.
Best practices
Use:
when there is a need to view or 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.
Focus management
Keyboard | Node |
|---|---|
Tab |
|
Shift + Tab |
|
Space | Selects or actions the item. |
Enter | Selects or actions the item. |
Esc | N/A |
Arrows | Up/Down - Moves focus to the previous/next node accordingly. Only nodes which are visible without opening a parent node should be focused. Right:
Left:
|
Home | Moves focus to the first/top node in the tree, without automatically opening or closing any nodes. |
End | Moves focus to the last focusable node without expanding any closed nodes. |
“*” (asterisk) |
|
a-z, A-Z |
|
Design
Zeplin link | Screen thumbnail |
|---|---|
Single Select |
 | |
Multi Select |
 |
Smart Select |
 |
Tree - Organization |
 |
Code
...