Tree
A tree helps showcase data in a hierarchical way, either for selection or navigation.
Last updated
A tree helps showcase data in a hierarchical way, either for selection or navigation.
Last updated
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.
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
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 navigating large amounts of data organized in a logical order.
For primary navigation on a page.
For simpler information structures. Radio group or checkbox group instead.
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.
It is not possible to split your tree with separators.
The tree selection icon will change depending on your selection type.
Item labels in the tree component should follow our content guidelines. Be clear and concise.
Tree offers keyboard navigation for accessibility purposes.
