eui documentation
  1. Components
  2. EuiTreeListComponent

File

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

Description

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

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

Example :
<eui-tree-list
  [isShowToolbar]="true"
  [filterFunction]="customFilter">
  <!-- tree items -->
</eui-tree-list>
Example :
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

Implements

AfterViewInit OnChanges

Metadata

encapsulation ViewEncapsulation.None
selector eui-tree-list
imports EuiTreeListToolbarComponent TranslateModule
templateUrl ./eui-tree-list.component.html
styleUrl ./eui-tree-list.scss

Index

Properties
Methods
Inputs
Outputs
Accessors

Inputs

ariaLabel
Type : string
Default value : ''

Sets the aria-label attribute for the tree list
collapseAllLabel
Type : string

Sets the label for the collapse-all button
e2eAttr
Type : string
Default value : 'eui-tree-list'

Sets the end-to-end attribute for the tree list
expandAllLabel
Type : string

Sets the label for the expand-all button
filterFunction
Type : function

Function to filter the tree list items based on the provided params
filterLabel
Type : string

Sets the label for the filter input
hasItemsUrl
Type : boolean
Default value : false
isExpanded
Type : boolean
Default value : false

Sets the expanded state of the tree list
isShowToolbar
Type : boolean
Default value : false

Option to show the toolbar
isShowToolbarToggle
Type : boolean
Default value : true
tabindex
Type : string
Default value : '0'

Sets the tabindex attribute to handle the focus state
toolbarFilterValue
Type : string
Default value : ''

Sets the filter value of the toolbar

Outputs

collapseAll
Type : EventEmitter

Event emitted upon collapsing all items.
expandAll
Type : EventEmitter

Event emitted upon expanding all items.
filter
Type : EventEmitter

Event that emits the filter value upon filtering.
itemSelected
Type : EventEmitter

Methods

Public disableFocus
disableFocus()

Method that makes the tree list not focusable.

Returns : void
Public focus
focus()

Method that puts the focus on the first child tree item.

Returns : void
Public focusOnNextTreeItem
focusOnNextTreeItem(currentTreeListItem: EuiTreeListItemComponent)

Method used to focus on the next tree item in the list.

Parameters :
Name Type Optional Description
currentTreeListItem EuiTreeListItemComponent No
  • The current tree list item.
Returns : boolean
  • Returns true if the focus was set on the next tree item, false otherwise.
Public focusOnPreviousTreeItem
focusOnPreviousTreeItem(currentTreeListItem: EuiTreeListItemComponent)

Method used to focus on the previous tree item in the list.

Parameters :
Name Type Optional Description
currentTreeListItem EuiTreeListItemComponent No
  • The current tree list item.
Returns : boolean
  • Returns true if the focus was set on the previous tree item, false otherwise.
onCollapseAll
onCollapseAll(event: Event)

Method that sets the collapsed state and emits the collapse-all event.

Parameters :
Name Type Optional
event Event No
Returns : void
onExpandAll
onExpandAll(event: Event)

Method that sets the expanded state and emits the expand-all event.

Parameters :
Name Type Optional
event Event No
Returns : void
onFilter
onFilter(filterValue: string)

Method that handles the visibility of the items based on the filter value and emits the filter event.

Parameters :
Name Type Optional Description
filterValue string No
  • The filter value to set.
Returns : void
onFocus
This method is not used anymore and will be removed in the next major version. You can use the `focus()` method instead.
onFocus()
Returns : void
Public setExpandedState
setExpandedState(state: boolean)

Method that sets the expanded state of the tree list items.

Parameters :
Name Type Optional
state boolean No
Returns : void
Public setVisibleState
setVisibleState(state: boolean)

Method that sets the visibility state of the tree list items.

Parameters :
Name Type Optional
state boolean No
Returns : void

Properties

Public ariaOwns
Type : string
Default value : ''
Public ariaRoleTree
Type : string
Default value : 'tree'
Public classes
Type : string
Default value : ''
items
Type : QueryList<EuiTreeListItemComponent>
Decorators :
@ContentChildren(undefined)
Public originalTabindex
Type : string
Default value : '0'

Accessors

hasExpandAllLabel
gethasExpandAllLabel()

Getter function that returns true if the expandAllLabel exists.

Returns : boolean
hasCollapseAllLabel
gethasCollapseAllLabel()

Getter function that returns true if the collapseAllLabel exists.

Returns : boolean

results matching ""

    No results matching ""