An expandable tree structure for displaying hierarchical data with branch connector lines. Use it for file explorers, nested category browsers, or any interface that visualizes parent-child relationships.
ts
import{XDSTreeList}from'@xds/core/TreeList'
Best practices
Guidance
Practices
Do
Provide meaningful labels and icons for each node to make the hierarchy easy to scan.
Do
Pre-expand important branches so users see key content immediately.
Don't
Nest more than 4–5 levels deep — flatten the structure or use a different pattern.
Don't
Use a tree for flat, non-hierarchical data — use a List instead.
Sub-components
TreeList is a compound component with 1 sub-component.
XDSTreeList
Tree list container. Accepts items data and rendering configuration. Expansion state is managed internally.
Prop
Type
Description
itemsrequired
XDSTreeListItemData[]
Recursive tree item data. Each item has id, label, optional children array, and optional isExpanded boolean for initial state.