# EuiTreeListComponent

**Type:** component

<p>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.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-tree-list [isShowToolbar]=&quot;true&quot;&gt;
  &lt;eui-tree-list-item label=&quot;Documents&quot;&gt;
    &lt;eui-tree-list-item label=&quot;Reports&quot; /&gt;
    &lt;eui-tree-list-item label=&quot;Invoices&quot; /&gt;
  &lt;/eui-tree-list-item&gt;
  &lt;eui-tree-list-item label=&quot;Images&quot;&gt;
    &lt;eui-tree-list-item label=&quot;Photos&quot; /&gt;
  &lt;/eui-tree-list-item&gt;
&lt;/eui-tree-list&gt;</code></pre></div><h3>With Custom Filter</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-tree-list
  [isShowToolbar]=&quot;true&quot;
  [filterFunction]=&quot;customFilter&quot;&gt;
  &lt;!-- tree items --&gt;
&lt;/eui-tree-list&gt;</code></pre></div><b>Example :</b><div><pre class="line-numbers"><code class="language-typescript">customFilter = (params: EuiTreeListFilterParams) =&gt; {
  return params.item.label.toLowerCase().includes(params.keyword.toLowerCase());
};</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Use role=&quot;tree&quot; on container (automatically applied)</li>
<li>Each item has role=&quot;treeitem&quot;</li>
<li>Keyboard navigation: Arrow keys to navigate, Enter to activate</li>
<li>Expandable items announce their state to screen readers</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Toolbar provides expand-all, collapse-all, and filter functionality</li>
<li>Filter function receives level, item, and keyword for custom filtering</li>
<li>Items can be nested to any depth</li>
<li>Supports keyboard navigation for accessibility</li>
</ul>


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

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - <p>Sets the aria-label attribute for the tree list</p>

- **collapseAllLabel**: `string` - <p>Sets the label for the collapse-all button</p>

- **e2eAttr**: `string` - <p>Sets the end-to-end attribute for the tree list</p>

- **expandAllLabel**: `string` - <p>Sets the label for the expand-all button</p>

- **filterFunction**: `function` - <p>Function to filter the tree list items based on the provided params</p>

- **filterLabel**: `string` - <p>Sets the label for the filter input</p>

- **hasItemsUrl**: `boolean` - 
- **isExpanded**: `boolean` - <p>Sets the expanded state of the tree list</p>

- **isShowToolbar**: `boolean` - <p>Option to show the toolbar</p>

- **isShowToolbarToggle**: `boolean` - 
- **tabindex**: `string` - <p>Sets the tabindex attribute to handle the focus state</p>

- **toolbarFilterValue**: `string` - <p>Sets the filter value of the toolbar</p>


## Outputs

- **collapseAll**: `EventEmitter` - <p>Event emitted upon collapsing all items.</p>

- **expandAll**: `EventEmitter` - <p>Event emitted upon expanding all items.</p>

- **filter**: `EventEmitter` - <p>Event that emits the filter value upon filtering.</p>

- **itemSelected**: `EventEmitter` - 


