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

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 tree consists of:

Leaf 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 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 node is an object containing other items (e.g. a folder).
Each container node consists of:
- a triangle toggle button, to the left of the title.
- an icon.
- a title.
Container 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 node is a folder, it may also have the 2 states, closed (when collapsed) and open (when expanded).

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.

Multiple Selection

Where multi-selection is used, each node will have a Checkbox, allowing the user to select and deselect it.

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.

Content

In most cases, nodes should be ordered alphabetically, to allow users locating specific items quickly.
Other cases may include logical, chronological or numeric orders.

States

	Container Node	Leaf 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 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, including all child items, if exist.
- If only some of the child items are selected, the parent item will be partially selected.
For reordering items, please refer to the Drag and drop page.

Best practices

Use:

when there is a need to 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.

Keyboard	Node
Tab	From the previous component: If no item is selected, moves focus to the first node in the tree. If a node is selected, moves focus to the first selected node. From the last node in the tree, navigates to the next component.
Shift + Tab	From the next component: If no item is selected, moves focus to the first node in the tree. If a node is selected, move focus to the first selected node. From the first node in the tree, navigates to the previous component.
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: When focus is on a closed node, opens the node. Focus does not move. When focus is on an open node, moves focus to the first child node. When focus is on an end node, does nothing. Left: When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.
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)	Expands all closed sibling nodes that are at the same level as the focused node. Focus does not move. See W3 for reference.
a-z, A-Z	Moves focus to the next node with a label starting with the typed character(s), if such an item exists. Typing multiple characters in rapid succession moves the focus to the next node starting with the string of typed characters. If no matching nodes are found below the focused node, the first node from the top of the tree should be focused (if exists). Only nodes which are visible without opening a parent node should be focused. If no node labels match the typed character(s), the focus does not move.

Design

Zeplin link	Screen thumbnail
Single Select https://zpl.io/agwRA0a
Multi Select https://zpl.io/a8L0Exa
Smart Select https://zpl.io/VDePyea
Tree - Organization https://zpl.io/adgoJlV

Tree