A tree structure is a hierarchical data structure that consists of nodes connected by edges.


When to use

Use a tree in the following cases:

  • To display hierarchical data, e.g. organization charts, file directories, nested categories, or any data with parent-child relationships.
  • To navigate through deeply nested information which cannot be displayed easily in a simple list navigation.
  • To maintain a consistent and familiar structure for displaying data across Insights Hub or your app.

Avoid using a tree in the following cases:

  • When the data has only 1 or 2 levels of hierarchy use more simple components like a list navigation, a list or a table.
  • When your app is built mobile-first, due to potential scrolling and nesting challenges.


default and compact tree

Default & compact tree

Use a compact tree for very limited space and when a huge number of nodes within a level is expected.

General construction

A tree container consists of the following elements:

tree container general construction

1. Title, 2. Filter, 3. tree list, Additional content, 5. Toggle view mode, 6. Manipulated list
  1. Title
  2. Filter
    • Search/filter (textual) or create a quick/predefined filter, custom/categorized filters
  3. Tree list
    • Root node
    • Favorite
    • All nodes
  4. Additional content
    • Can contain meta information like parameters, links and further information
  5. Toggle view mode
    • Possible view modes are tree, list, card, map etc.
  6. Manipulated list
    • Collapse/expand all
    • Show/hide icons
    • Order/sort tree nodes
    • Other manipulation actions

A tree item consists of the following elements:

tree item general construction

  1. Status (optional)
    • Sets the status for an item.
  2. Expanded or collapsed indicator
    • Indicates if a tree is expanded or collapsed.
  3. Supporting visual (optional)
    • A supporting visual may be an icon, a pictogram (for example an avatar) or an image.
    • Use only one type of visualisation.
  4. Checkbox (see details here)
    • A checkbox provides the possibility to select a tree item to perform an action on it.
  5. Node name
    • A label is mandatory.
  6. Description (optional)
    • Contains additional information. Can be a description, type name, creator name etc.
  7. Additional meta data (optional)
    • Contains additional content-relevant information; e.g. a text or icon.
  8. Badge (optional)
    • Number of dashboards, child assets etc. (see details here)
    • Can have an icon
  9. Favorite (optional)
    • To toggle an item as favorite or not favorite.
    • If an item is only marked as favorite without toggle action, use the star icon in position 7 instead.
  10. Additional actions (optional)
    • Ghost button (for a ‘more’ menu containing an arbitrary number of actions)

Default tree item

Default tree item


The following tree item options are available:

Text only

Text only option

Base node option

Use this option when a tree consists of the same content type and no other item elements than a label, a drill down indicator and an additional description if needed.

Supporting visual

Supporting visual

Supporting visuals

Use this visual to distinguish different content types.

Item status

Item status

The item status shows if an element has an error or warning etc.



The checkbox provides the possibility to select a tree item to perform an action.

Use for a multi-selection to perform e.g. batch actions like deleting multiple items at once (see behavior).



1. Counter, 2. Type, 3. Status explanation

Use a badge to provide additional secondary information that should be scannable:

  1. Counter: e.g. number of children or number of objects attached to the node.
  2. Type: e.g. device or asset type.
  3. Status: if a status indicator on the left is not enough, and it is important to show the cause (keep short, 1-2 words!).



  1. Expanded or collapsed indicator
    • Clicking the drill down button expands or collapses an item that contains child items.
  2. Checkbox
    • Checkbox input has a selected and unselected state.
    • An indeterminate state shows partially checked states.
    • The parent checkbox will be indeterminate until all its child objects are checked.
    • By clicking on the parent checkbox all its child objects will be checked.
  3. Node name and description
    • Clicking on the node name and description shows the detailed information on the object in the main or item region.
    • In case the tree parent item is just a container element without specific detailed information
    • the node name and description are either not clickable.
    • or the node name and description expand or collapse the item on click.
  4. Favorite
    • It is possible to toggle between favorite and not favorite.
  5. Additional actions
    • An arbitrary number of app-specific actions can be made available.



Changing selected states of a parent node and its children

By default, a selection or deselection of a parent or its child has some dependency:

  • Selecting or deselecting a parent will select or deselect all children (also known as “select all/none”)
  • Selecting one or more children will set their parent to intermediate state

Note that this is a general recommendation and might not be applicable for some use cases.

Text overflow

Following options for text overflow are available:

  • Truncation with tooltip
  • Horizontal scroll
  • Resizable leading region


If an item label is too long for the available horizontal space, the label will be cut off.On hover and focus, the complete label is displayed in a tooltip.
Horizontal scrolling

Horizontal scrolling

If the content of a tree does not fit into the space provided, it should be possible to scroll horizontally to see the entire content.
Resizable leading region

Resizable leading region

For highly nested trees in the leading region, it should be possible to resize the region.

Additional content

Additional content fixed at the bottom

If the content of the additional content area is of high interest and contains important information, it will remain fixed at the bottom of the page if the list in the tree is longer than the visible area.

Additional content moved down

If the content of the additional content area contains only additional meta information of secondary interest, it will be moved down and out of the visible area if the list in the tree is longer than the visible area.

Do’s & Don’ts

tree in a leading region only

tree in both a leading and main region

Do not use a tree in both a leading and main region at the same time, as this can be confusing for the user.


This chapter shows several tree styles in the design system.



States (default)

If the node is not selected: 1. default, 2. hover, 3. active, 4. disabled, 5. focus (left is collapsed, right is expanded)

States for selected nodes

If the node is selected: 1. default, 2. hover, 3. active, 4. disabled, 5. focus (left is collapsed, right is expanded)

Collapse button

Collapse arrow: 1. default, 2. hover, 3. active, 4. disabled, 5. focus (left is collapsed, right is expanded; same behavior for selected and unselected nodes)

Favourite button

Favorite: 1. default, 2. hover, 3. active, 4. disabled, 5. focus


Checkbox (for multi-selection): 1. none selected, 2. all selected, 3. partially selected (with intermediate state)


Example of simple tree

Example of a tree: 1. default, 2. compact

Example of complex tree

Example of a tree with more elements

Sizing and spacing

Find the full specifications here or on the downloadable Figma file on the Tree page.

To see a detailed explanation of all existing helper classes, please refer to the usage table below.

Tree image

Tree with sample content and functionality

This tree demo shows sample content and functionality.

Tree with sample content and functionality

Compact tree with sample content and functionality


Compact tree

Simple tree

Tree with different states

Tree with indicators

Tree with checkboxes


.tree .tree--compact Compact variant of the tree.
.tree__node .is-nested Sets the visibility of the arrow to visible. The default arrow direction is down.
.tree__node .is-collapsed Sets the direction of the arrow to right.
.tree__node .is-level1
Defines the indentation of the individual levels.
.tree__node .is-selected Marks the tree__node as selected.
.tree__node .is-disabled Disable the tree__node.
.tree__node .is-info, .is-warning, .is-error, .is-success Adds different states to the tree node.
.node__favorite .is-selected Marks the favorite button as selected.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top