Tree View

EuiTreeView allows you to render recursive objects, such as a file directory. The chilldren prop takes an array of nodes.

Keyboard navigation allows users to navigate and interact with the tree using the arrow keys, spacebar, and return.

The icon prop accepts EuiIcon and EuiToken as react nodes. You can also specifiy a different icon for the open state with the iconWhenExpanded prop.

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.