# EuiTreeComponent

**Type:** component



The eui-tree can be used to display hierarchy data with optional added behavior inside node templates and interactions that could affect the rendered data such as expand, collapse, direct actions, extra menu actions, etc.
Hierarchical tree component for displaying and interacting with nested data structures.
Supports single and multi-select modes, recursive selection, virtual scrolling for large datasets, and custom node templates.
Provides expand/collapse functionality, path highlighting, and customizable node rendering.
Integrates with Angular CDK Tree for efficient rendering and state management.
Commonly used for file explorers, organizational charts, category navigation, and any hierarchical data visualization.

### Basic Usage
```html
<eui-tree
  [nodes]="treeData"
  [isSelectable]="true"
  (selectionChange)="onSelectionChange($event)">
</eui-tree>
```

```typescript
treeData: TreeDataModel = [
  {
    id: '1',
    label: 'Root',
    children: [
      { id: '1.1', label: 'Child 1' },
      { id: '1.2', label: 'Child 2' }
    ]
  }
];
```

### With Custom Template
```html
<eui-tree [nodes]="data" [nodeTemplateRef]="customNode">
</eui-tree>

<ng-template #customNode let-node>
  <eui-icon [svgName]="node.icon" />
  <span>{{ node.label }}</span>
</ng-template>
```

### Accessibility
- Use role="tree" on container (automatically applied)
- Each node has role="treeitem"
- Keyboard navigation: Arrow keys to navigate, Enter to select, Space to expand/collapse
- Provide aria-label describing the tree purpose

### Notes
- Virtual scrolling improves performance for large trees (1000+ nodes)
- Recursive selection propagates selection to all children
- Custom templates allow full control over node rendering
- Supports lazy loading of child nodes


**Selector:** `eui-tree`

## Inputs
- **autoTranslate**: `boolean` - Whether i18n key can be passed to be translated with `TranslateService`.
- **collapsedSvgIconClass**: `string` - Icon to display when a node is opened
- **customNodeSelectFn**: `CustomNodeSelectFn` - 
- **e2eAttr**: `string` - 
- **expandedSvgIconClass**: `string` - Icon to display when a node is closed
- **highlightPath**: `boolean` - Whether all parents till the selected are highlighted in bold.
- **isClickTogglingNode**: `boolean` - Whether the full node display can be clicked to toggle the node.
- **isMultiselect**: `boolean` - Whether multiple nodes can be selected.
- **isRecursiveParentSelection**: `boolean` - In combination with `isMultiselect`. Whether the selection of all children will automatically select the parent.
- **isRecursiveSelection**: `boolean` - In combination with `isMultiselect`. Whether the selection of a node will automatically select its children.
- **isSingleSelect**: `boolean` - Whether only one node can be selected. Select one will unselect the previous selected.
- **nodeContentMetadataTemplateRef**: `TemplateRef<any>` - 
- **nodes**: `TreeDataModel` - Hierarchy of data to display in the tree
- **nodeTemplateRef**: `TemplateRef<any>` - Reference to the `ng-template` used to render node item
- **rightContextMenuTemplateRef**: `TemplateRef<any>` - 
- **showLines**: `boolean` - Whether the lines are displayed on the left of nodes.
- **showUnderlinedLinks**: `boolean` - Whether the links are underlined on hiver in the tree.
- **virtualScrollPageSize**: `number` - Size of the virtaul scroll pages
- **virtualScrollThreshold**: `number` - Treshold for the virtual scroll to be activated

## Outputs
- **nodeClick**: `EventEmitter` - 
- **nodeToggle**: `EventEmitter` - 
- **selectionChange**: `EventEmitter` -