# TreeView Source: https://lumeo.nativ.sh/components/tree-view # TreeView A hierarchical tree structure with expand/collapse, checkboxes, and search. ## Installation .NET CLI PackageReference Lumeo CLI dotnet add package Lumeo One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction). ## Usage @using Lumeo ## 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 Preview Code Basic Tree Documents Photos Music Preview Code With Checkboxes (Tri-state) Frontend Backend Preview Code With Search Documents Photos Music Preview Code Multi-select Documents Photos Music Preview Code Lazy Load Children src tests docs Preview Code Custom Node Template Documents Photos Music Preview Code OnItemClick — interactive Documents Photos Music Click a node above. Click any node to see its label reported below the tree. Preview Code Expand All / Collapse All Expand All Collapse All Documents Photos Music ## API Reference ### TreeView Property Type Default Description Items List>? 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. 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? null Currently selected node values (multi-select). Use with @bind-SelectedValues. SelectedValuesChanged EventCallback> — Callback invoked when the selection changes. LoadChildren Func, Task>>>? 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> — Callback invoked with all currently-checked values whenever a checkbox is toggled. NodeTemplate RenderFragment>? null Custom template for the label area of each node. Receives the TreeViewItem as context. OnItemClick EventCallback> — Fired when a node is clicked. OnItemCheck EventCallback> — Fired when a node checkbox is toggled. ### TreeView Public Methods Method Description ExpandAllNodes() Programmatically expands every node in the tree. CollapseAllNodes() Programmatically collapses every node in the tree. ### TreeViewItem Property Type Description Text string Display label for the node. Value T? Application-domain value associated with the node. Children List>? 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 SvgIcon? Optional icon rendered before the node label (uses the Blazicons SvgIcon type). ## Related Components - [Accordion](/components/accordion) — Collapsible sections without hierarchical nesting - [SortableList](/components/sortable-list) — Reorderable flat lists with drag-and-drop