MudBlazor

TreeView

Easily customizable tree view.

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

<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

<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));
              }
          }
          
          An error has occurred. This application may no longer respond until reloaded. Reload 🗙