Tree View
Hand-composed hierarchy for sidebars, pickers, and file lists where you control every row.
Wrap rows in nested TreeItem components with TreeItemLayout slots. Bind TreeExpansion and TreeSelection with Leptos signals for open and selected ids. When items come from an API, lazy loading, or virtualization, use RichTree instead — same selection and expansion APIs, data adapters instead of nested components.
- Hand-authored hierarchies with custom slots (icons, aside actions, motion)
- Sidebars and pickers where item count is modest
- Full control over row layout via
TreeItemLayout
- Wrap rows in Tree + nested
TreeItemcomponents. - Bind
TreeExpansion::open_itemsfor controlled expand/collapse. - Choose
TreeSelectionmode (single,multi,checkbox, ornone).
Branch pre-expanded via open_items; nested leaf under Documents.
Compact row height for dense sidebars.
Three-level branch chain demonstrates nested subtrees.
Starts collapsed; clicking the branch toggles open_items.
All leaves — no chevrons.
Click rows to select one item at a time.
Items use theme background tokens.
Leading icon, trailing badge, and hover-revealed aside actions.
Ctrl/Meta toggles; Shift selects a visible range.
Parent checkbox selects descendants when cascade is enabled.
Disabled rows remain focusable for screen-reader access.
Only the chevron toggles expansion; row click selects.
External button uses TreeApiRef to toggle every branch.
Indentation guide lines between levels.
Double-click or Enter on a focused row edits the label.
Pointer drag reorders siblings when reorderable is enabled.
Override the CSS transition name via TreeItemCollapse.