Navigieren auf digital.sbb.ch

Beta

Tree

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

Example image of the tree component in the standard variant

Design specification

4.2 Selectable

Exmpale image of the tree component in the selectable variant

Design specification

5. Example application

Image of an example of a tree