| Table of Contents |
|---|
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 |
In this case the smart selection method will be applied. See TBD
Usage & Behaviour
...
 | |
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.
It They usually appears 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 objects 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.
In case 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 objects (e.g. a folder)items.
Each container parent node consists of:
a triangle toggle button, to the left of the title.
an icon
.
a title.
The container node has two Standard parent nodes have 2 states:
Collapsed - : when all children object child items are hidden. In this case, the triangle toggle button points to towards the node title of the object.
Expanded - : when all or some levels of children objects child items are shown. In this case, the triangle toggle button points downdownwards.
Child nodes will be:
shown below their parent node.
indented relative to their parent node.
If the icon representing a container mode parent node is a folder, it may also have to the 2 states: ; closed (when collapsed) 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 (when expanded).
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.
If Where there is no root node, the list can be either entirely expanded, entirely collapsed or showing the only will have at least the 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
...
. 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 a standard parent node will:
select that node.
expand the node. If the node is already expanded, clicking it will not collapse back.
Clicking a triangle button will:
toggle the button between states,
collapse / expand the node. If loading the content of the node takes more than 1 second, a Progress indicator will appear.
Where multiple selection is used:
clicking a checkbox will select / deselect the item.
clicking the checkbox for a standard parent node will also select/deselect all child items.
if only some of the child items are selected, the parent item will show as partially selected.
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
...