Tree List

File System

Project Files

Storage Browser (P20 Section Nav)

caremedata

Size Variants

SMALL

MEDIUM (default)

LARGE

Organization Chart with Badges

Settings Navigation (Admin Panel)

Settings

Select a setting from the tree to view details

Usage examples

Copy-paste-ready snippets for TreeList.

Basic tree

<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

<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 },
            }
        }
    };
}