| 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 tree
...
...
Multiple selection tree
...
For multiple selection trees, smart selection mode will be applied. See the Interaction section of Lists for more information.
...
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 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.
Container nodes:
A container 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.
Parent nodes
A 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 (optional).
a title.
Container 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.
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
...
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.
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 . 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 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
.
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 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 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
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.
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
...
General
Avoid using 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
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Node |
|---|---|
Tab |
|
Shift + Tab |
|
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
...