TreeView
A hierarchical tree structure with expand/collapse, checkboxes, and search.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <TreeView />
When to Use
- File browsers and directory explorers with nested folder structures
- Nested categories such as product taxonomies or menu hierarchies
- Hierarchical data display like org charts or project breakdowns
- Multi-level selection where parent-child relationships matter
Row-click semantic. Clicking anywhere on a parent row both selects it and
toggles its expansion — the whole row is the expand/collapse target, giving a large hit and
touch area (the VS Code file-tree pattern). Leaf rows only select. The chevron and the arrow
keys still expand/collapse on their own, and a Ctrl/Shift modifier click
only selects. Set
ExpandOnRowClick="false" to make the chevron the
sole expand trigger (a row click then only selects).
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
Documents
Music
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
Frontend
Backend
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
src
tests
docs
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
Click a node above.
Click any node to see its label reported below the tree.
Documents
Resume.pdf
Cover Letter.docx
Photos
Vacation
beach.jpg
sunset.jpg
profile.png
Music
playlist.m3u
API Reference
TreeView<T>
| Property | Type | Default | Description |
|---|---|---|---|
| Items | List<TreeViewItem<T>>? | null | Tree data source. |
| ShowCheckboxes | bool | false | Show checkboxes on each node. |
| CascadeCheck | bool | true | When true, checking a parent automatically checks its children and parent state reflects an indeterminate state when only some children are checked. |
| Expandable | bool | true | Allow expanding/collapsing nodes. |
| ExpandOnRowClick | bool | true | When true, clicking anywhere on a parent row both selects it and toggles its expansion (VS Code file-tree pattern). Set false to make the chevron the sole expand trigger, so a row click only selects. Leaf rows always just select; the chevron, keyboard (Arrow keys), and a Ctrl/Shift-modifier click are unaffected. |
| ExpandAll | bool | false | When true, all nodes start expanded. |
| ShowSearch | bool | false | Show search filter above the tree. |
| MultiSelect | bool | false | Enables selecting multiple nodes at once. |
| SelectedValues | List<T>? | null | Currently selected node values (multi-select). Use with @bind-SelectedValues. |
| SelectedValuesChanged | EventCallback<List<T>> | — | Callback invoked when the selection changes. |
| LoadChildren | Func<TreeViewItem<T>, Task<List<TreeViewItem<T>>>>? | null | Async function to lazily load children when a node is first expanded. The node's IsLoading flag is set while the task runs. |
| CheckedValuesChanged | EventCallback<List<T?>> | — | Callback invoked with all currently-checked values whenever a checkbox is toggled. |
| NodeTemplate | RenderFragment<TreeViewItem<T>>? | null | Custom template for the label area of each node. Receives the TreeViewItem as context. |
| OnItemClick | EventCallback<TreeViewItem<T>> | — | Fired when a node is clicked. |
| OnItemCheck | EventCallback<TreeViewItem<T>> | — | Fired when a node checkbox is toggled. |
TreeView<T> Public Methods
| Method | Description |
|---|---|
| ExpandAllNodes() | Programmatically expands every node in the tree. |
| CollapseAllNodes() | Programmatically collapses every node in the tree. |
TreeViewNode<T>
The per-node renderer TreeView uses internally to draw each row and recurse into its children. Selected parameters below are documented for reference; most consumers configure the tree via TreeView<T> rather than using TreeViewNode<T> directly.
| Property | Type | Default | Description |
|---|---|---|---|
| Item | TreeView<T>.TreeViewItem<T> | — | The tree item this node renders. |
| Level | int | 0 | Nesting depth (0 = root); drives indentation and the aria-level attribute. |
| PosInSet | int | 1 | 1-based position among the currently-visible siblings at this level, exposed as aria-posinset. |
| SetSize | int | 1 | Total number of currently-visible siblings at this level, exposed as aria-setsize. |
| SelectedNodes | HashSet<TreeView<T>.TreeViewItem<T>>? | null | The set of currently-selected node instances (reference-identity), owned and threaded down by the parent TreeView. |
| OnSelectionChanged | EventCallback<TreeView<T>.TreeViewItem<T>> | — | Fired when this node is selected via row click or Enter/Space; TreeView uses it internally to update SelectedNodes and SelectedValues. |
TreeViewItem<T>
| Property | Type | Description |
|---|---|---|
| Text | string | Display label for the node. |
| Value | T? | Application-domain value associated with the node. |
| Children | List<TreeViewItem<T>>? | Child nodes. Null/empty = leaf node unless IsLeaf is set. |
| IsExpanded | bool | Whether the node is currently expanded. |
| IsChecked | bool | Whether the node's checkbox is checked. |
| IsIndeterminate | bool | True when some (but not all) children are checked — shown as a mixed/indeterminate checkbox. |
| IsLeaf | bool | When true, hides the expand chevron and the loading indicator even if the node has no children yet. |
| IsLoading | bool | Set automatically while LoadChildren is running. Renders a spinner in place of the chevron. |
| IsDisabled | bool | Disables the node so it cannot be clicked or checked. |
| Icon | IconSource? | Optional icon rendered before the node label (a Lumeo.IconSource). |
Related Components
- Accordion — Collapsible sections without hierarchical nesting
- SortableList — Reorderable flat lists with drag-and-drop