Lumeo

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
docs

Click a node above.

Click any node to see its label reported below the tree.

API Reference

TreeView<T>

Property Type Default Description
ItemsList<TreeViewItem<T>>?nullTree data source.
ShowCheckboxesboolfalseShow checkboxes on each node.
CascadeCheckbooltrueWhen true, checking a parent automatically checks its children and parent state reflects an indeterminate state when only some children are checked.
ExpandablebooltrueAllow expanding/collapsing nodes.
ExpandAllboolfalseWhen true, all nodes start expanded.
ShowSearchboolfalseShow search filter above the tree.
MultiSelectboolfalseEnables selecting multiple nodes at once.
SelectedValuesList<T>?nullCurrently selected node values (multi-select). Use with @bind-SelectedValues.
SelectedValuesChangedEventCallback<List<T>>—Callback invoked when the selection changes.
LoadChildrenFunc<TreeViewItem<T>, Task<List<TreeViewItem<T>>>>?nullAsync function to lazily load children when a node is first expanded. The node's IsLoading flag is set while the task runs.
CheckedValuesChangedEventCallback<List<T?>>—Callback invoked with all currently-checked values whenever a checkbox is toggled.
NodeTemplateRenderFragment<TreeViewItem<T>>?nullCustom template for the label area of each node. Receives the TreeViewItem as context.
OnItemClickEventCallback<TreeViewItem<T>>—Fired when a node is clicked.
OnItemCheckEventCallback<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.

TreeViewItem<T>

Property Type Description
TextstringDisplay label for the node.
ValueT?Application-domain value associated with the node.
ChildrenList<TreeViewItem<T>>?Child nodes. Null/empty = leaf node unless IsLeaf is set.
IsExpandedboolWhether the node is currently expanded.
IsCheckedboolWhether the node's checkbox is checked.
IsIndeterminateboolTrue when some (but not all) children are checked — shown as a mixed/indeterminate checkbox.
IsLeafboolWhen true, hides the expand chevron and the loading indicator even if the node has no children yet.
IsLoadingboolSet automatically while LoadChildren is running. Renders a spinner in place of the chevron.
IsDisabledboolDisables the node so it cannot be clicked or checked.
IconSvgIcon?Optional icon rendered before the node label (uses the Blazicons SvgIcon type).

Related Components

  • Accordion — Collapsible sections without hierarchical nesting
  • SortableList — Reorderable flat lists with drag-and-drop