# EuiTreeListItemComponent

**Type:** component



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.

### Basic Usage
```html
<!-- Simple tree item -->
<eui-tree-list-item label="Documents" />

<!-- Tree item with nested items -->
<eui-tree-list-item label="Projects" [isExpanded]="true">
  <eui-tree-list>
    <eui-tree-list-item label="Project A" />
    <eui-tree-list-item label="Project B" />
  </eui-tree-list>
</eui-tree-list-item>

<!-- With sublabel and active state -->
<eui-tree-list-item
  label="Current File"
  subLabel="Modified today"
  [isActive]="true"
  euiPrimary />
```

### Custom Content
```html
<eui-tree-list-item>
  <eui-tree-list-item-content>
    <eui-icon-svg icon="eui-folder" />
    <span>Custom Content</span>
  </eui-tree-list-item-content>
</eui-tree-list-item>

<!-- Custom label -->
<eui-tree-list-item>
  <eui-tree-list-item-label>
    <strong>Bold Label</strong>
  </eui-tree-list-item-label>
</eui-tree-list-item>
```

### Accessibility
- Implements ARIA treeitem role automatically
- Keyboard navigation: Arrow keys (up/down/left/right), Enter/Space to toggle
- Expanded state announced to screen readers
- Focus management with proper tabindex handling
- Aria-label generated from label or custom content

### Notes
- Nested items must be wrapped in eui-tree-list component
- Supports color variants via BaseStatesDirective (euiPrimary, euiSuccess, etc.)
- isActive highlights the current/selected item
- isAlwaysExpanded keeps item permanently expanded without toggle button
- Custom content projections: eui-tree-list-item-label, eui-tree-list-item-details, eui-tree-list-item-sub-container


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

## Inputs
- **ariaLabel**: `string` - 
- **e2eAttr**: `string` - 
- **id**: `string` - 
- **isActive**: `boolean` - Option that enables a corresponding class if it is set to true.
- **isAlwaysExpanded**: `boolean` - Option to set the expanded state of the list item when it is always expanded.
- **isDisplaySubLinksOnHover**: `boolean` - 
- **isExpanded**: `boolean` - Option to set the expanded state of the list item.
- **isNavigateOnlyOnLabelClick**: `boolean` - 
- **isVisible**: `boolean` - Option to set the visible state of the list item and apply the corresponding hidden class if it is set to false.
- **label**: `string` - The label of the tree list item if there is no customLabel.
- **linkUrl**: `string` - 
- **subLabel**: `string` - The sublabel of the tree list item if there is no customLabel.
- **subLinks**: `UxLinkLegacy[]` - 
- **url**: `string` - 
- **euiPrimary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSecondary**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiInfo**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiSuccess**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiWarning**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiDanger**: `any` - From host directive: #[[file:BaseStatesDirective.md]]
- **euiVariant**: `any` - From host directive: #[[file:BaseStatesDirective.md]]

## Outputs
- **toggled**: `EventEmitter` - Event emitted upon toggling the expanded state.