Tree List
Hierarchical tree structure with expand/collapse, icons, badges, and selection. Useful for navigation panels, file browsers, and resource explorers.
File System
Storage Browser (P20 Section Nav)
Size Variants
SMALL
MEDIUM (default)
LARGE
Organization Chart with Badges
Settings Navigation (Admin Panel)
Select a setting from the tree to view details
Usage examples
Copy-paste-ready snippets for TreeList.
Basic tree
Nested nodes with selection
razor
<TreeList Title="Files"
Items="nodes"
@bind-SelectedKey="selectedKey"
OnNodeClick="HandleNodeClick" />
@code {
private string? selectedKey;
private List<TreeList.TreeNode> nodes = new()
{
new() {
Key = "docs",
Label = "Documents",
Children = new()
{
new() { Key = "readme", Label = "README.md" },
new() { Key = "license", Label = "LICENSE" },
}
},
new() { Key = "src", Label = "src" },
};
private void HandleNodeClick(TreeList.TreeNode node) { /* ... */ }
}With icons & badges
Icon markup and count badges per node
razor
<TreeList Items="nodes"
ShowLines="true"
DefaultExpandedKeys="@(new HashSet<string> { "engineering" })" />
@code {
private List<TreeList.TreeNode> nodes = new()
{
new() {
Key = "engineering",
Label = "Engineering",
IconMarkup = TeamIcon,
Badge = "12",
Children = new()
{
new() { Key = "alice", Label = "Alice", IconMarkup = PersonIcon },
new() { Key = "bob", Label = "Bob", IconMarkup = PersonIcon },
}
}
};
}