## Overview
The tree component helps users navigate large amounts of data and potentially select some thanks to a clear hierarchy. Like a regular tree, the component has a root and can have branches that can be collapsed or expanded, and leaves.
At Mirakl, we use the tree component to showcase catalog categories, for example.
## Guidelines
The tree root helps gives users a reference point so that they understand that they're at the right place. It is optional and can be selected by users. [Learn more about selection types](#selection-types)
Tree items are sorted alphabetically, with priority given to branches arranged alphabetically, then to leaves arranged alphabetically.
It is possible to add extra information next to the root, branch, or leaf label, like a settings code or a number (e.g. number of products within a category). You may also add an icon.
In terms of loading, each brand has its own loader if it has lots of items. A loading icon will appear when this happens.
### When to use
* When navigating large amounts of data organized in a logical order.
### When not to use
* For primary navigation on a page.
* For simpler information structures. Use[^1] Radio group or checkbox group instead.
### Selection types
Roma offers 4 different selection types.
* **Simple** allows for a single value to be selected at a time.
* **Navigation** allows for a single value to be selected at a time but without showing the radio button.
* **Multiple** allows for multiple selections with heritage. Selecting a branch will automatically select all its leaf children.
* **Multiple without heritage** allows for multiple selections without heritage. Selecting a branch will only select the branch as if it were a leaf. To select a branch and its children, you can use the Select all button available when hovering over a branch.
The 4 selection types
{% hint style="info" %}
It is not possible to split your tree with separators.
{% endhint %}
{% hint style="info" %}
The tree selection icon will change depending on your selection type.
{% endhint %}
## Accessibility
Tree offers keyboard navigation for accessibility purposes.
[^1]:
