Tree view
EuiTreeView allows you to render recursive objects, such as a file directory. It is not meant to be used as primary navigation, for that we recommend using EuiSideNav.
EuiTreeView does not accept children directly but requires an array of EuiTreeViewNodes through
its items prop.
Each node requires a label and a unique id. The icon prop accepts any icon or token.
You can also specify a different icon for the open state with the iconWhenExpanded prop.
Use the nodes' children prop to nest more nodes.
For accessibility, it is required to provide a descriptive aria-label for each tree view.
This component also builds in keyboard navigation allowing users to traverse the tree using the arrow keys,
spacebar, and return.
Optional styling
EuiTreeView supports a compressed mode with the display="compressed" setting. When using the compressed version
it's highly recommended to use the small size of EuiIcon and the extra small size of EuiToken.
This will help prevent awkard alignment issues when used alongside the showExpansionArrows prop.
The showExpansionArrows prop provides an additional visual indicator. Ideal for when a tree's items use icons
that don't immediately let a user know that there are nested nodes that may not be visible.
In some cases, you may want to automatically expand all the items with children. In those instances,
you can use the expandByDefault prop, as seen in the example below.
Lastly, each node can also accept a custom className should you need to style them individually.