| Table of Contents |
|---|
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
In this case the smart selection method will be applied. See TBD
...
Usage & Behaviour
...
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
...
The 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.
Container nodes:
A container 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.
Parent nodes
A 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
(optional).
a title.
The container node has two 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.
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).
Child nodes
A child node is a node that is contained within a parent node.
Child nodes are indented relative to their parent node.
The tree header
The line above the tree will include (from left to right):
A select all checkbox, for trees which support multi-selection (optional)
An Expand/Collapse all button (optional)
Total no. of items:
If the parents serve as folders only (i.e parents cannot be selected without its children):
the total number will include only child nodes at the end of the tree (without any further children).
the total number text will get ellipsis, and hovering over it will display a tooltip (“<no. of items> <item type> excluding parent nodes”).
If the parents can be selected without their children, the total no. will include all nodes.
No. of selected items, for trees which support multi-selection.
If no item is selected it should display “(0 selected)”.
Trees may also include an info button. On hover, a tooltip will appear, explaining about the tree.
...
Search
A Search field may be shown above the header, in order to filter the tree. (Optional).
Show only selected
Very long or branched trees may include a Show only selected option. See interaction below.
...
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 . 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 the label is not visible 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 locating to locate 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 patternitems quickly.
Other cases may use logical, chronological, or numeric ordering.
Types
Type | Image | Description |
Single selection |  Where parents cannot be selected - On mouse over: .png?version=3&modificationDate=1757511557607&cacheVersion=1&api=v2&width=329) On focus:  | The user can select a single node only. Where parents cannot be selected:
|
Multiple selection - Regular (dependent) tree |  Where parents cannot be selected:  | The user can select multiple nodes. For this type of tree:
|
Multiple selection - Linked nodes | Regular link indication: .png?version=5&modificationDate=1757511557753&cacheVersion=1&api=v2&width=300) Hovered link indication:  | Linked nodes are where parents are automatically selected when one of their children is selected. For example, in a permissions tree, enabling the child node Edit may also automatically enable the linked parent node View.
|
Multiple selection - Independent tree |  The kebab menu:  The info button and tooltip:  | An independent tree is one in which checking or unchecking a checkbox affects that node only (e.g. checking a parent’s checkbox will not automatically check the checkboxes of its children). This type of tree will be used where the parent is an entity in itself. The independent tree will include the following features:
The Info button is mandatory for Independent trees. On hover, a tooltip will appear providing details on the tree behaviour. |
Smart Selection |  | See smart selection on the List page |
Multiple selection - Read-only |  |
States
Parent node | Standard node | |
|---|---|---|
Regular |  |  |
Hover |  |  |
Active |  |  |
Selected |  |  |
Disabled | NA |  |
Focused |  |  |
Focused, Hover |  |  |
Focused, Active |  |  |
Focused, Disabled | NA |  |
Error - tree with no kebab menu |  |  |
Error - tree with kebab menu |  |  |
Warning - tree with no kebab menu |  |  |
Warning - tree with kebab menu |  |  |
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.
Selection
If the selected item is a parent, it will expand one child level (optional).
Search
When the tree includes a search field and the user starts typing the characters:
the tree will be filtered to only show those which match the search string.
If Show only selected is also applied, only selected (checked) nodes which match the search term will be displayed.
The nodes will be displayed as a list, one below the other, with no hierarchical structure.
The characters which match the search string will be highlighted in each node.
If the tree is an independent tree, the dots indicating that a parent has selected children will still be displayed.
...
On hover/focus, each node will show a “Tree node view” icon button.
It will be located at the end of the row.
If the tree includes a menu button on any nodes, the “Tree node view” button will be located to the left of the menu button.
If a status icon exists for a node, it will be displayed to the left of the “Tree node view” button.
When the user clicks on the “Tree node view” button a Popover will be displayed. The popover will show:
an image of the node (highlighted), its parents, and its direct children.
a “Show in context” link.
When the user clicks on “Show in context”:
the search field will be cleared, and the user will be taken back to the regular, hierarchical view of the tree.
the tree will automatically scroll to show the relevant node at the top. This node will be highlighted temporarily.
where the node contains children, it will be automatically expanded to show the first level of direct children.
.png?version=2&modificationDate=1757511276420&cacheVersion=1&api=v2&width=210)
If the user checks a parent, all its children will be selected.
When the user cancels the search the tree will go back to the same structure (regarding including expand-collapse) as? before the search was started.
Show only selected
When the “Show only selected” switch is turned on:
the tree will be filtered to only show the selected nodes.
the nodes will be displayed exactly as they are in the Search view: as a list with no hierarchical structure, and including a “Tree node view” icon button. See above.
...
When no selected items match the search term, an empty state will be shown.
...
Best practices
Use:
when there is a need to view or select one or more items from in a hierarchical list.
Do not Don't use:
Where where there is no real 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
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
...
Keyboard | Node |
|---|---|
Tab |
|
Shift + Tab |
...
to select values in a form or where the number of items is small → use a Drop-down Menu instead
| |
Space | Checks (or uncheks) the checkbox. |
Enter | For a tree that includes contextual menus with assistive actions:  For all other trees: NA |
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
...