| 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
...
Smart Selection
...
Read-only
...
Dependencies between nodes
...
...
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
...
A node is an object that contains data.
Each 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.
Where a 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.
...
Parent nodes
...
A parent node is an object containing other items.
Each parent node consists of:
a triangle toggle button, to the left of the title.
an icon (optional).
a title.
Standard parent 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 parent node is a folder, it may also have the 2 states; closed (when collapsed) and open (when expanded).
...
Child 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
...
...
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 additional levels of nodes as needed.
Where there is no root node, the list will have at least the first node expanded. The state of other nodes will be determined as needed.
...
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.
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 in a hierarchical list.
...
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Focus management
Keyboard | Node |
|---|---|
Tab |
|
Shift + Tab |
|
Space | Selects Checks (or actions uncheks) the itemcheckbox. |
EnterSelects or actions the item. | 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 |
|
...
Zeplin link | Screen thumbnail |
|---|---|
Single Select |  |
Multi Select |  |
Smart Select |  |
Tree - Organization |  |
Code
...