Trees provide a way to display and work with basic hierarchical data. They offer a clear representation of structured information and are typically used in the main list for list-detail scenarios, popovers, or dialogs.

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_Intro.html

Tree – live example

Do

Use the tree component:

• To display hierarchically structured items.
• To enable selection of one or more items from a set of hierarchically structured items.

Don't

Don’t use the tree component:

• To display items that are not structured hierarchically. In this case, use the list component.
• To select one item from a very small number of non-hierarchical items. A select or combo box might be more appropriate.
• The hierarchy turns out to have only two levels. In this case, use a list with group items.

1. Header (optional): The first item of the tree serves as a header, and contains the title of the tree.
2. Node: Item that contains additional items.
3. Root: Single topmost node (level 1).
4. Leaf: Item that doesn’t contain any other items.
5. Expand/collapse icon: An icon for expanding and collapsing the node is provided automatically for each node that has child nodes.
6. Footer (optional): The last item of the tree can serve as a footer.

Anatomy of a tree

The standard tree item (ui5-tree-item) is the simplest type of tree item. It provides the most common features, such as text, icon, and a checkbox or radio button.

1. Checkbox / radio button:

   • In multiple selection mode, a checkbox is displayed.
   • In single selection mode, a radio button is displayed.

2. Icon (optional): You can place an icon at the beginning of an item (before the text).

3. Text

4. Additional text (optional): The tree item can have an additional text located on the far right of the row (property: additionalText). You can also apply a semantic value to this text (property: additionalTextState property).

5. Delete button

Anatomy of a standard tree item

If additional components are needed, use a custom tree item. The custom tree item allows you to use any combination of components inside the tree.

We recommend sticking with the intended tree design and only inserting additional components within the given tree structure.

Use this variant as a starting point.

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_Intro.html

Standard tree – live example

One item in the tree can be selected. To select an item, you can click anywhere on the item. For single selection, this is the preferred mode.

Always keep one item selected. The basic single selection mode doesn’t add any visual indication to the tree. If no item is selected, it can’t be differentiated from trees without selection.

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_SingleSelect.html

Single selection – live example

One item in the tree can be selected. For this, the tree provides radio buttons on the left or right side of each line item. Use this selection mode only if clicking on the item triggers something else, such as navigation.

Ideally, always keep one item selected, even in the initial state.

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_SingleSelect_RadioButton.html

Single selection with radio button – live example

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

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_MultipleSelection.html

Multiple selection – live example

To allow deletion of single items, use the tree in “Delete” mode. This adds a Delete button :icon-declineto each item.

Do not use this mode if deleting multiple items at once is the main use case. Delete cannot be used together with single selection or multiple selection.

https://www.sap.com/design-system/live-examples/Tree/Tree_LE_Delete.html

Delete – live example