eui documentation
  1. Components
  2. EuiTreeListItemComponent

File

packages/components/eui-tree-list/eui-tree-list-item.component.ts

Description

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

Example :
<!-- 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

Example :
<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

Implements

AfterContentInit

Metadata

encapsulation ViewEncapsulation.None
HostDirectives BaseStatesDirective
 Inputs : euiPrimary euiSecondary euiInfo euiSuccess euiWarning euiDanger euiVariant 
selector eui-tree-list-item
imports TranslateModule FormsModule NgTemplateOutlet EUI_LABEL EUI_ICON_INPUT EUI_ICON_BUTTON_EXPANDER
templateUrl ./eui-tree-list-item.component.html

Index

Properties
Methods
Inputs
Outputs
HostBindings
Accessors

Inputs

ariaLabel
Type : string
e2eAttr
Type : string
Default value : 'eui-tree-list-item'
id
Type : string
isActive
Type : boolean
Default value : false

Option that enables a corresponding class if it is set to true.
isAlwaysExpanded
Type : boolean
Default value : false

Option to set the expanded state of the list item when it is always expanded.
isDisplaySubLinksOnHover
Type : boolean
Default value : false
isExpanded
Type : boolean
Default value : false

Option to set the expanded state of the list item.
isNavigateOnlyOnLabelClick
Type : boolean
Default value : false
isVisible
Type : boolean
Default value : true

Option to set the visible state of the list item and apply the corresponding hidden class if it is set to false.
label
Type : string

The label of the tree list item if there is no customLabel.
linkUrl
Type : string
subLabel
Type : string

The sublabel of the tree list item if there is no customLabel.
subLinks
Type : UxLinkLegacy[]
Default value : []
url
Type : string

Outputs

toggled
Type : EventEmitter

Event emitted upon toggling the expanded state.

HostBindings

attr.role
Type : string
Default value : 'treeitem'
attr.tabindex
Type : string
Default value : '0'
class
Type : string

Methods

Public focus
focus()

Method used to enable/disable the focus state.

Returns : void
Public focusOnLastExpandedTreeItem
focusOnLastExpandedTreeItem()

Method used to focus on the last expanded tree item.

Returns : void
onKeyDown
onKeyDown(event: KeyboardEvent)

Method fired when a key is pressed down.

Parameters :
Name Type Optional Description
event KeyboardEvent No
  • The keyboard event.
Returns : void
Public setExpandedState
setExpandedState(state: boolean)

Method that sets the expanded state.

Parameters :
Name Type Optional Description
state boolean No
  • The expanded state.
Returns : void
Public setVisibleState
setVisibleState(state: boolean)

Method that sets the visible state.

Parameters :
Name Type Optional Description
state boolean No
  • The visible state.
Returns : void
toggle
toggle(event: Event)

Method fired when the expander button is clicked.

Parameters :
Name Type Optional Description
event Event No
  • The click event.
Returns : void

Properties

baseStatesDirective
Type : unknown
Default value : inject(BaseStatesDirective)
customContent
Type : QueryList<EuiTreeListItemContentComponent>
Decorators :
@ContentChildren(undefined, {descendants: false})
customDetailContent
Type : QueryList<EuiTreeListItemDetailsContentTagDirective>
Decorators :
@ContentChild(undefined)
customLabel
Type : QueryList<EuiTreeListItemLabelTagDirective>
Decorators :
@ContentChild(undefined)
customSubContainerContent
Type : QueryList<EuiTreeListItemSubContainerContentTagDirective>
Decorators :
@ContentChild(undefined)
focusable
Type : ElementRef<HTMLDivElement>
Decorators :
@ViewChild('focusable')
hasCustomContent
Type : unknown
Default value : false
hasSub
Type : unknown
Default value : false
isHovered
Type : unknown
Default value : false
subTreeList
Type : QueryList<EuiTreeListComponent>
Decorators :
@ContentChildren(undefined, {descendants: true})
tabIndex
Type : string
Default value : '0'
Decorators :
@HostBinding('attr.tabindex')
treeListComponent
Type : EuiTreeListComponent
Default value : inject(EuiTreeListComponent, { host: true, optional: true })!

Accessors

cssClasses
getcssClasses()

results matching ""

    No results matching ""