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.

Component

Accessibility recommendation

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.

Loading...

Usage

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 awkward 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.

Loading...

Props

EuiTreeView

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop items# ↦	Description and type An array of EuiTreeViewNodes Type: Node[] ↦	Default value Required ↵
Prop children# ↦	Description and type Never accepts children directly, only through the items prop Type: never ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop display# ↦	Description and type Optionally use a variation with smaller text and icon sizes Type: EuiTreeViewDisplayOptions ↦	Default value default ↵
Prop expandByDefault# ↦	Description and type Set all items to open on initial load Type: boolean ↦	Default value ↵
Prop showExpansionArrows# ↦	Description and type Display expansion arrows next to all items that contain children Type: boolean ↦	Default value ↵
Prop ref# ↦	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: LegacyRef<unknown> ↦	Default value ↵

𐘂𐘂

EuiTreeViewItem

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop id# ↦	Description and type Required for aria-controls accessibility Type: string ↦	Default value Required ↵
Prop label# ↦	Description and type The main button content Type: ReactNode ↦	Default value Required ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop children# ↦	Description and type Used to render nested EuiTreeViews Type: ReactNode ↦	Default value ↵
Prop icon# ↦	Description and type Optional icon to render. Pass, e.g., <EuiIcon /> or <EuiToken /> Type: ReactNode ↦	Default value ↵
Prop hasArrow# ↦	Description and type Renders an arrow if children exists. Otherwise renders a blank icon Type: boolean ↦	Default value ↵
Prop isActive# ↦	Description and type Adds a targetable modifier class Type: boolean ↦	Default value ↵
Prop isExpanded# ↦	Description and type Sets the aria-expanded attribute Type: boolean ↦	Default value ↵
Prop display# ↦	Description and type Determines default or compressed display Type: EuiTreeViewDisplayOptions ↦	Default value ↵
Prop buttonRef# ↦	Description and type Type: Ref<HTMLButtonElement> ↦	Default value ↵
Prop wrapperProps# ↦	Description and type Optional extra props to pass to the wrapping <li> Type: HTMLAttributes<HTMLLIElement> ↦	Default value ↵

𐘂𐘂