TreeView

MudBlazor

Easily customizable tree view.

API

<MudTreeView>
- <MudTreeViewItem>
- <MudTreeViewItemToggleButton>

Basic

Basic TreeView, icon button with hover and click to expand sub items.

Getting Started
- Installation
Components
- Avatar
- Button

<MudTreeView T="string">
    <MudTreeViewItem Value="@("Getting Started")">
        <MudTreeViewItem Value="@("Installation")" />
    </MudTreeViewItem>
    <MudTreeViewItem Value="@("Components")">
        <MudTreeViewItem Value="@("Avatar")" />
        <MudTreeViewItem Value="@("Button")" />
    </MudTreeViewItem>
</MudTreeView>

Hoverable

content
- logo.png
src
- mudblazor.docs
- mudblazor.docs.server

<MudPaper Width="300px" Elevation="0">
    <MudTreeView T="string" CanHover="true">
        <MudTreeViewItem Value="@("content")">
            <MudTreeViewItem Value="@("logo.png")" />
        </MudTreeViewItem>
        <MudTreeViewItem Value="@("src")">
            <MudTreeViewItem Value="@("mudblazor.docs")" />
            <MudTreeViewItem Value="@("mudblazor.docs.server")" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

Dense

content
- logo.png
src
- mudblazor.docs
- mudblazor.docs.server

<MudPaper Width="300px" Elevation="0">
    <MudTreeView T="string" Dense="true" Hover="true">
        <MudTreeViewItem Value="@("content")">
            <MudTreeViewItem Value="@("logo.png")" />
        </MudTreeViewItem>
        <MudTreeViewItem Value="@("src")">
            <MudTreeViewItem Value="@("mudblazor.docs")" />
            <MudTreeViewItem Value="@("mudblazor.docs.server")" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

Expand

With ExpandOnClick bool the whole item row can be clicked to expand/collapse the sub trees.

Applications
- Terminal
Documents
- MudBlazor
  Api
  
  Components

<MudTreeView T="string" ExpandOnClick="true">
    <MudTreeViewItem Value="@("Applications")">
        <MudTreeViewItem Value="@("Terminal")" />
    </MudTreeViewItem>
    <MudTreeViewItem Value="@("Documents")">
        <MudTreeViewItem Value="@("MudBlazor")">
            <MudTreeViewItem Value="@("Api")" />
            <MudTreeViewItem Value="@("Components")" />
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

Icons

The icons and the color of the icon can be changed individualy per item.

All Mail
Drafts
Orders
Categories
- Social
- Updates
- Forums
- Spam
Trash

<MudTreeView T="string">
    <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Filled.Email" />
    <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Filled.Drafts" />
    <MudTreeViewItem Value='"Orders"' Icon="@Icons.Filled.Label" IconColor="Color.Success" />
    <MudTreeViewItem Value='"Categories"' Icon="@Icons.Filled.Label" IconColor="Color.Error" ExpandedIcon="@Icons.Filled.ArrowRight">
        <MudTreeViewItem Value='"Social"' Icon="@Icons.Filled.Group" />
        <MudTreeViewItem Value='"Updates"' Icon="@Icons.Filled.Info" IconColor="Color.Warning" />
        <MudTreeViewItem Value='"Forums"' Icon="@Icons.Filled.QuestionAnswer" />
        <MudTreeViewItem Value='"Spam"' Icon="@Icons.Filled.LocalOffer" />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"Trash"' Icon="@Icons.Filled.Delete" />
</MudTreeView>

Selection

Use @bind-SelectedValue on the TreeView to select a single item.

.vscode
- launch.json
- tasks.json
content
- logo.png

Selected item:

<MudPaper Width="300px" Elevation="0">
    <MudTreeView @bind-SelectedValue="SelectedValue" Hover="true">
        <MudTreeViewItem @bind-Expanded="@folderOneExpanded" Value="@(".vscode")" Icon="@(folderOneExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("launch.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
            <MudTreeViewItem Value="@("tasks.json")" Icon="@Icons.Custom.FileFormats.FileCode" />
        </MudTreeViewItem>
        <MudTreeViewItem @bind-Expanded="@folderTwoExpanded" Value="@("content")" Icon="@(folderTwoExpanded ? Icons.Custom.Uncategorized.FolderOpen : Icons.Custom.Uncategorized.Folder)">
            <MudTreeViewItem Value="@("logo.png")" Icon="@Icons.Custom.FileFormats.FileImage" />
        </MudTreeViewItem>
    </MudTreeView>
</MudPaper>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Selected item: @SelectedValue</MudText>

@code {
    string SelectedValue { get; set; }
    bool folderOneExpanded;
    bool folderTwoExpanded;
}

Selected Color

The color of the selected item can be changed with Color property.

All Mail
Drafts
Orders
Categories
- Social
- Updates
- Forums
- Spam
Trash

Color

<MudGrid>
    <MudItem xs="12" md="8" Class="my-auto">
    <MudTreeView Color="Color" T="string" Hover="true" @bind-SelectedValue="SelectedValue">
        <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Filled.Email" />
        <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Filled.Drafts" />
        <MudTreeViewItem Value='"Orders"' Icon="@Icons.Filled.Label" />
        <MudTreeViewItem Value='"Categories"' Icon="@Icons.Filled.Label">
            <MudTreeViewItem Value='"Social"' Icon="@Icons.Filled.Group" />
            <MudTreeViewItem Value='"Updates"' Icon="@Icons.Filled.Info" />
            <MudTreeViewItem Value='"Forums"' Icon="@Icons.Filled.QuestionAnswer" />
            <MudTreeViewItem Value='"Spam"' Icon="@Icons.Filled.LocalOffer" />
        </MudTreeViewItem>
        <MudTreeViewItem Value='"Trash"' Icon="@Icons.Filled.Delete" />
    </MudTreeView>
    </MudItem>
    <MudItem xs="12" md="4">
        <MudSelect Label="Color" OffsetY="true" Dense="true" Margin="Margin.Dense" @bind-Value="Color">
            <MudSelectItem T="Color" Value="Color.Primary">Primary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Secondary">Secondary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Tertiary">Tertiary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Info">Info</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Success">Success</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Warning">Warning</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Error">Error</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Dark">Dark</MudSelectItem>
        </MudSelect>
    </MudItem>
</MudGrid>

@code{ 
    public Color Color { get; set; } = Color.Error;
    string SelectedValue { get; set; }
}

Multiselect

If you set MultiSelection to true, you can select multiple values and they are returned as HashSet<T> via SelectedValues.

content
- logo.png
src
- mudblazor.docs
- mudblazor.docs.server
  
  wwwroot
  
  robots.txt
  
  favicon.ico

Number of selected items: 0

<MudTreeView MultiSelection="true" @bind-SelectedValues="SelectedValues">
    <MudTreeViewItem Value="@("content")">
        <MudTreeViewItem Value="@("logo.png")" />
    </MudTreeViewItem>
    <MudTreeViewItem Value="@("src")">
        <MudTreeViewItem Value="@("mudblazor.docs")" />
        <MudTreeViewItem Value="@("mudblazor.docs.server")">
            <MudTreeViewItem Value="@("wwwroot")">
                <MudTreeViewItem Value="@("robots.txt")" />
                <MudTreeViewItem Value="@("favicon.ico")" />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

<MudText Style="width: 100%" Typo="Typo.subtitle1"  Class="mb-n2">Number of selected items: @(SelectedValues?.Count ?? 0)</MudText>

@code {
    HashSet<string> SelectedValues { get; set; }
}

Multiselect Color

The color of the checkboxes when MultiSelection is set to true can be changed with CheckBoxColor property.

content
- logo.png
src
- mudblazor.docs
- mudblazor.docs.server
  
  wwwroot
  
  robots.txt
  
  favicon.ico

Color

<MudGrid>
    <MudItem xs="12" md="8" Class="my-auto">
        <MudTreeView T="string" CheckBoxColor="Color" MultiSelection="true">
            <MudTreeViewItem Value="@("content")">
                <MudTreeViewItem Value="@("logo.png")" />
            </MudTreeViewItem>
            <MudTreeViewItem Value="@("src")">
                <MudTreeViewItem Value="@("mudblazor.docs")" />
                <MudTreeViewItem Value="@("mudblazor.docs.server")">
                    <MudTreeViewItem Value="@("wwwroot")">
                        <MudTreeViewItem Value="@("robots.txt")" />
                        <MudTreeViewItem Value="@("favicon.ico")" />
                    </MudTreeViewItem>
                </MudTreeViewItem>
            </MudTreeViewItem>
        </MudTreeView>
    </MudItem>
    <MudItem xs="12" md="4">
        <MudSelect Label="Color" OffsetY="true" Dense="true" Margin="Margin.Dense" @bind-Value="@Color">
            <MudSelectItem T="Color" Value="Color.Default">Default</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Primary">Primary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Secondary">Secondary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Tertiary">Tertiary</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Info">Info</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Success">Success</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Warning">Warning</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Error">Error</MudSelectItem>
            <MudSelectItem T="Color" Value="Color.Dark">Dark</MudSelectItem>
        </MudSelect>
    </MudItem>
</MudGrid>

@code{
    public Color Color { get; set; } = Color.Error;
    HashSet<string> SelectedValues { get; set; }
}

ItemTemplate

This example shows how to use ItemTemplate to automatically build the tree items according to a hierarchical data structure.

All Mail
Trash
Categories
- Social
  90
- Updates
  2294
- Forums
  3566
- Promotions
  733
History

Activated item:

Sum of selected items: 0

<MudPaper Width="300px" Elevation="0">
    <MudTreeView Items="TreeItems" MultiSelection="true" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues">
        <ItemTemplate>
            <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="@context"
                             Icon="@context.Icon" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" />
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

<div style="width: 100%">
    <MudText Typo="@Typo.subtitle1">Activated item: @(ActivatedValue?.Title)</MudText>
    <MudText Typo="@Typo.subtitle1">Sum of selected items: @GetSelectedSum()</MudText>
</div>

@code {
    private TreeItemData ActivatedValue { get; set; }

    private HashSet<TreeItemData> SelectedValues { get; set; }

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Title { get; set; }

        public string Icon { get; set; }

        public int? Number { get; set; }

        public bool IsExpanded { get; set; }

        public HashSet<TreeItemData> TreeItems { get; set; }

        public TreeItemData(string title, string icon, int? number = null)
        {
            Title = title;
            Icon = icon;
            Number = number;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData("All Mail", Icons.Filled.Email));
        TreeItems.Add(new TreeItemData("Trash", Icons.Filled.Delete));
        TreeItems.Add(new TreeItemData("Categories", Icons.Filled.Label)
        {
            IsExpanded = true,
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("Social", Icons.Filled.Group, 90),
                new TreeItemData("Updates", Icons.Filled.Info, 2294),
                new TreeItemData("Forums", Icons.Filled.QuestionAnswer, 3566),
                new TreeItemData("Promotions", Icons.Filled.LocalOffer, 733)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Label));
    }

    public int GetSelectedSum()
    {
        return SelectedValues?.Sum(i => i.Number ?? 0) ?? 0;
    }
}

Server Side Data

Data can be loaded on demand with the use of ServerData prop, the loading icon and its color can be changed with LoadingIcon and LoadingIconColor prop.

All Mail
Trash
Categories
History

<MudPaper Width="300px" Elevation="0">
    <MudTreeView ServerData="LoadServerData" Items="TreeItems">
        <ItemTemplate>
            <MudTreeViewItem Value="@context" Icon="@context.Icon" LoadingIconColor="Color.Info" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" />
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

@code{
    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Title { get; set; }

        public string Icon { get; set; }

        public int? Number { get; set; }

        public HashSet<TreeItemData> TreeItems { get; set; }

        public TreeItemData(string title, string icon, int? number = null)
        {
            Title = title;
            Icon = icon;
            Number = number;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData("All Mail", Icons.Filled.Email));
        TreeItems.Add(new TreeItemData("Trash", Icons.Filled.Delete));
        TreeItems.Add(new TreeItemData("Categories", Icons.Filled.Label)
        {
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("Social", Icons.Filled.Group, 90),
                new TreeItemData("Updates", Icons.Filled.Info, 2294),
                new TreeItemData("Forums", Icons.Filled.QuestionAnswer, 3566),
                new TreeItemData("Promotions", Icons.Filled.LocalOffer, 733)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Label));
    }

    public async Task<HashSet<TreeItemData>> LoadServerData(TreeItemData parentNode)
    {
        await Task.Delay(500);
        return parentNode.TreeItems;
    }
}

Custom Tree

When the Content property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own. Use the Height or MaxHeight parameters to scroll the treeview.

.azure
.github
.vscode
content
src
- MudBlazor
- MudBlazor.Docs
  
  _Imports.razor
  
  compilerconfig.json
  
  MudBlazor.Docs.csproj
  
  NewFilesToBuild.txt
- MudBlazor.Docs.Client
- MudBlazor.Docs.Compiler
- MudBlazor.Docs.Server
- MudBlazor.UnitTests
- MudBlazor.UnitTests.Viewer
- .editorconfig
- MudBlazor.sln
History

<MudPaper Width="350px" MaxHeight="500px" Class="overflow-y-auto" Elevation="0">
    <MudTreeView Items="@TreeItems">
        <ItemTemplate>
            <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems">
                <Content>
                    <MudTreeViewItemToggleButton @bind-Expanded="@context.IsExpanded" Visible="@context.HasChild" />
                    <MudIcon Icon="@context.Icon" Class="ml-0 mr-2" Color="@Color.Default" />
                    <MudText>@context.Text</MudText>
                </Content>
            </MudTreeViewItem>
        </ItemTemplate>
    </MudTreeView>
</MudPaper>

@code {

    private HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

    public class TreeItemData
    {
        public string Text { get; set; }

        public string Icon { get; set; }

        public bool IsExpanded { get; set; } = true;

        public bool HasChild => TreeItems != null && TreeItems.Count > 0;

        public HashSet<TreeItemData> TreeItems { get; set; } = new HashSet<TreeItemData>();

        public TreeItemData(string text, string icon)
        {
            Text = text;
            Icon = icon;
        }
    }

    protected override void OnInitialized()
    {
        TreeItems.Add(new TreeItemData(".azure", Icons.Custom.Brands.MicrosoftAzure));
        TreeItems.Add(new TreeItemData(".github", Icons.Custom.Brands.GitHub));
        TreeItems.Add(new TreeItemData(".vscode", Icons.Custom.Brands.MicrosoftVisualStudio));
        TreeItems.Add(new TreeItemData("content", Icons.Custom.FileFormats.FileDocument));
        TreeItems.Add(new TreeItemData("src", Icons.Custom.FileFormats.FileCode)
        {
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("MudBlazor", Icons.Custom.Brands.MudBlazor),
                new TreeItemData("MudBlazor.Docs", Icons.Custom.FileFormats.FileDocument)
                {
                    TreeItems = new HashSet<TreeItemData>()
                    {
                        new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail),
                        new TreeItemData( "compilerconfig.json", Icons.Custom.FileFormats.FileImage),
                        new TreeItemData( "MudBlazor.Docs.csproj", Icons.Custom.Brands.MicrosoftVisualStudio),
                        new TreeItemData("NewFilesToBuild.txt" , Icons.Custom.FileFormats.FileDocument),
                    }
                },
                new TreeItemData("MudBlazor.Docs.Client", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Compiler", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Server", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Filled.Folder),
                new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode),
                new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
    }
}

Tooltip

Typography