Description

A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.

Open

Types

	Image
Single selection	Open
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

Structure

A tree consists of multiple nodes.

• 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.

Standard 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.

  • a title.

• Standard 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).

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.

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

• 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 to locate specific items quickly.

• Other cases may use logical, chronological, or numeric ordering.

States

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

Design

Code