1. What does the component do?

• Displays hierarchically structured data in a tree structure.

2. When should the component be used?

• To display and select elements in a hierarchical structure.

3. rules

• When using a tree as a navigation element, it makes sense not to use too many hierarchy levels (recommendation max. 3).
• When using an tree to display data structures (e.g. a dossier, analogous to a file browser), it depends on the application how many hierarchy levels are needed.
• The icon as a supplement to the text is optional.

4. Variants and statuses

The component has the following statuses:

• Collapsed
• Expanded
• Default
• Hover
• Selected

4.1 Standard

Design specification

• Parent Collapsed
• Parent Expanded
• Leaf Default
• Leaf Hover
• Leaf Selected

4.2 Selectable

Design specification

• Parent Collapsed
• Parent Expanded
• Leaf Default
• Leaf Hover
• Leaf Selected

5. Example application