Tree

The Tree component renders data in a hierarchical structure that is defined by the data prop passed to the component. This component supports a series of parent nodes and child nodes, where the parent nodes act as directories that can expand or collapse the children beneath it. This functionality uses the Expand Collapse component.

Properly format the data passed to the Tree component so that the component can render the nodes appropriately. Follow the structure laid out in the following example, as well as the properties below.

The styles for this component can be completely customized by providing parent and node renderer functions. This allows for you to build your own unique trees varying in complexity off of the base Tree component while utilizing all of its built-in functionality.

This site features a few examples of how complex the Tree component can become. The left-side navigation menu and the right-side page navigation menu are both implementations of the Tree component.