# EuiTreeListItemComponent

**Type:** component

<p>Individual item component within eui-tree-list representing a single node in the hierarchical structure.
Supports nested sub-items, expand/collapse functionality, and custom content projection.
Implements keyboard navigation and ARIA treeitem role for accessibility.
Integrates with BaseStatesDirective for theming variants (primary, secondary, success, warning, danger).
Must be used as a direct child of eui-tree-list or nested within other tree list items.</p>
<h3>Basic Usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;!-- Simple tree item --&gt;
&lt;eui-tree-list-item label=&quot;Documents&quot; /&gt;

&lt;!-- Tree item with nested items --&gt;
&lt;eui-tree-list-item label=&quot;Projects&quot; [isExpanded]=&quot;true&quot;&gt;
  &lt;eui-tree-list&gt;
    &lt;eui-tree-list-item label=&quot;Project A&quot; /&gt;
    &lt;eui-tree-list-item label=&quot;Project B&quot; /&gt;
  &lt;/eui-tree-list&gt;
&lt;/eui-tree-list-item&gt;

&lt;!-- With sublabel and active state --&gt;
&lt;eui-tree-list-item
  label=&quot;Current File&quot;
  subLabel=&quot;Modified today&quot;
  [isActive]=&quot;true&quot;
  euiPrimary /&gt;</code></pre></div><h3>Custom Content</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-tree-list-item&gt;
  &lt;eui-tree-list-item-content&gt;
    &lt;eui-icon-svg icon=&quot;eui-folder&quot; /&gt;
    &lt;span&gt;Custom Content&lt;/span&gt;
  &lt;/eui-tree-list-item-content&gt;
&lt;/eui-tree-list-item&gt;

&lt;!-- Custom label --&gt;
&lt;eui-tree-list-item&gt;
  &lt;eui-tree-list-item-label&gt;
    &lt;strong&gt;Bold Label&lt;/strong&gt;
  &lt;/eui-tree-list-item-label&gt;
&lt;/eui-tree-list-item&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Implements ARIA treeitem role automatically</li>
<li>Keyboard navigation: Arrow keys (up/down/left/right), Enter/Space to toggle</li>
<li>Expanded state announced to screen readers</li>
<li>Focus management with proper tabindex handling</li>
<li>Aria-label generated from label or custom content</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Nested items must be wrapped in eui-tree-list component</li>
<li>Supports color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)</li>
<li>isActive highlights the current/selected item</li>
<li>isAlwaysExpanded keeps item permanently expanded without toggle button</li>
<li>Custom content projections: eui-tree-list-item-label, eui-tree-list-item-details, eui-tree-list-item-sub-container</li>
</ul>


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

**Standalone:** false

## Inputs

- **ariaLabel**: `string` - 
- **e2eAttr**: `string` - 
- **id**: `string` - 
- **isActive**: `boolean` - <p>Option that enables a corresponding class if it is set to true.</p>

- **isAlwaysExpanded**: `boolean` - <p>Option to set the expanded state of the list item when it is always expanded.</p>

- **isDisplaySubLinksOnHover**: `boolean` - 
- **isExpanded**: `boolean` - <p>Option to set the expanded state of the list item.</p>

- **isNavigateOnlyOnLabelClick**: `boolean` - 
- **isVisible**: `boolean` - <p>Option to set the visible state of the list item and apply the corresponding hidden class if it is set to false.</p>

- **label**: `string` - <p>The label of the tree list item if there is no customLabel.</p>

- **linkUrl**: `string` - 
- **subLabel**: `string` - <p>The sublabel of the tree list item if there is no customLabel.</p>

- **subLinks**: `UxLinkLegacy[]` - 
- **url**: `string` - 

## Outputs

- **toggled**: `EventEmitter` - <p>Event emitted upon toggling the expanded state.</p>

