# EuiTreeListComponent

**Type:** component



Hierarchical tree list component for displaying nested navigation or content structures.
Provides expand/collapse functionality, filtering, and keyboard navigation support.
Supports optional toolbar with expand-all, collapse-all, and filter controls.
Implements ARIA tree role for accessibility compliance.
Commonly used for navigation menus, file explorers, or any hierarchical list display.

### Basic Usage
```html
<eui-tree-list [isShowToolbar]="true">
  <eui-tree-list-item label="Documents">
    <eui-tree-list-item label="Reports" />
    <eui-tree-list-item label="Invoices" />
  </eui-tree-list-item>
  <eui-tree-list-item label="Images">
    <eui-tree-list-item label="Photos" />
  </eui-tree-list-item>
</eui-tree-list>
```

### With Custom Filter
```html
<eui-tree-list
  [isShowToolbar]="true"
  [filterFunction]="customFilter">
  <!-- tree items -->
</eui-tree-list>
```

```typescript
customFilter = (params: EuiTreeListFilterParams) => {
  return params.item.label.toLowerCase().includes(params.keyword.toLowerCase());
};
```

### Accessibility
- Use role="tree" on container (automatically applied)
- Each item has role="treeitem"
- Keyboard navigation: Arrow keys to navigate, Enter to activate
- Expandable items announce their state to screen readers

### Notes
- Toolbar provides expand-all, collapse-all, and filter functionality
- Filter function receives level, item, and keyword for custom filtering
- Items can be nested to any depth
- Supports keyboard navigation for accessibility


**Selector:** `eui-tree-list`

## Inputs
- **ariaLabel**: `string` - Sets the aria-label attribute for the tree list
- **collapseAllLabel**: `string` - Sets the label for the collapse-all button
- **e2eAttr**: `string` - Sets the end-to-end attribute for the tree list
- **expandAllLabel**: `string` - Sets the label for the expand-all button
- **filterFunction**: `function` - Function to filter the tree list items based on the provided params
- **filterLabel**: `string` - Sets the label for the filter input
- **hasItemsUrl**: `boolean` - 
- **isExpanded**: `boolean` - Sets the expanded state of the tree list
- **isShowToolbar**: `boolean` - Option to show the toolbar
- **isShowToolbarToggle**: `boolean` - 
- **tabindex**: `string` - Sets the tabindex attribute to handle the focus state
- **toolbarFilterValue**: `string` - Sets the filter value of the toolbar

## Outputs
- **collapseAll**: `EventEmitter` - Event emitted upon collapsing all items.
- **expandAll**: `EventEmitter` - Event emitted upon expanding all items.
- **filter**: `EventEmitter` - Event that emits the filter value upon filtering.
- **itemSelected**: `EventEmitter` -