| 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 treeIn this case the | For multiple selection trees, smart selection method mode will be applied. |  |
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
...
Leaf 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 its 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.
...
A container node is an object containing other objects items (e.g. a folder).
Each container node consists of:
a triangle toggle button, to the left of the title.
an icon
.
a title.
The container node has two Container 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 node is a folder, it may also have to the 2 states: , closed (when collapsed) and open respectively(when expanded).
In some cases, a counter will appear next to the node title, showing the number of contained objectsitems.
A root node (optional)
This is a 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 items at once.
 |
Multiple Selection
In case of multiple selectionWhere multi-selection is used, each node will have a checkbox Check Box which appears on hover, allowing the user to select and deselect it.
Default State
If Where a root node exists, it will be expanded by default, showing the second level of nodes.
If Where there is no root node, the list can be either entirely expanded, entirely collapsed, or showing have only the only first node expanded and the other nodes collapsed - all according to . This depends on the specific needs and expected usage.
Content
Nodes should be ordered alphabetically, to allow users locating specific objects items quickly.
An exception to this guideline are is time-related objectslists, that which should be ordered chronologically, with the most recent item first.
Logical: Sort items . Sort options into a meaningful order. Group For example, group related options together, and show order by the most common options first, followed by less common options. Alphabetical: Sort the options alphabetically if to least common.
Alphabetical. If there are more than 8 select options are 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 into 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 |
...
Hovering over a truncated node title will show a tooltip Tooltip containing the full title.
Clicking on a node (including the title and the icon, if exists) selects will select it. This will unselect any Any previously-selected nodenodes will automatically be deselected.
Clicking a triangle toggle button or double-clicking a container node will:
toggle the node between the collapsed and expanded state of the node. In case states. When loading the content of the node takes more than 1 second, a Progress Indicator will appear.
toggle the triangle button between states.
In case of Where multiple selection is used:
Clicking a checkbox will check / uncheck check box will select or deselect the item, including all child items if existswhere they exist, regardless of other selections.
In case not all If only some of the child items are selected, the parent item’s state item will be state to in a partially selected state.
For See the Interaction section of Lists for more information about on selecting items, see lists.
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
Best practices
...
when there is a need to select one or more items from a hierarchical list.
Do not Don't use:
Where 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:
Try to avoid trees with too many hierarchy levels. How many are reasonable?
In case of a long list add a Search componentAn 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.
Design
Zeplin link | Screen thumbnail |
|---|---|
Single Select |  |
Multi Select |  |
Smart Select |  |
Tree - Organization |  |
...