MudBlazor

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

TreeView

Easily customizable tree view.

See TreeView API for parameter documentation.

Simple Tree View

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView T="string">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

Highlight TreeItem on mouse over

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView T="string" CanHover="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

Activate TreeItem on click (select and highlight a single item)

Use @bind-Activated on TreeViewItem to bind a single item.

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Activated item:
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView CanActivate="true" @bind-ActivatedValue="ActivatedValue">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Activated item: @ActivatedValue</MudText>
@code {
    string ActivatedValue { get; set; }
}

Selectable items

Use @bind-Selected on TreeViewItem to bind a single item.

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Number of selected items: 0
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView CanSelect="true" @bind-SelectedValues="SelectedValues">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

<MudText Style="width: 100%" Typo="@Typo.subtitle1">Number of selected items: @(SelectedValues?.Count ?? 0)</MudText>
@code {
    HashSet<string> SelectedValues { get; set; }
}

Expand-on-click

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView T="string" ExpandOnClick="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

TreeItem with icons

  • All Mail

  • Trash

  • Categories

    • Social

    • Updates

    • Forums

    • Promotions

  • History

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView T="string">
    <MudTreeViewItem Value='"All Mail"' Icon="@Icons.Filled.Email" />
    <MudTreeViewItem Value='"Trash"' Icon="@Icons.Filled.Delete"  />
    <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='"Promotions"' Icon="@Icons.Filled.LocalOffer"  />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"History"' Icon="@Icons.Filled.Label"  />
</MudTreeView>

Dense TreeView

  • content

    • logo.png

    • MudBlazor.svg

    • Nuget.png

  • src

    • MudBlazor

    • MudBlazor.Docs

      • wwwroot

        • MudAppbarCorner.svg

        • MudBlazorDocs.min.css

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView T="string" Dense="true">
    <MudTreeViewItem Value='"content"'>
        <MudTreeViewItem Value='"logo.png"' />
        <MudTreeViewItem Value='"MudBlazor.svg"' />
        <MudTreeViewItem Value='"Nuget.png"' />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"src"'>
        <MudTreeViewItem Value='"MudBlazor"' />
        <MudTreeViewItem Value='"MudBlazor.Docs"'>
            <MudTreeViewItem Value='"wwwroot"'>
                <MudTreeViewItem Value='"MudAppbarCorner.svg"' />
                <MudTreeViewItem Value='"MudBlazorDocs.min.css"' />
            </MudTreeViewItem>
        </MudTreeViewItem>
    </MudTreeViewItem>
</MudTreeView>

TreeViewItemTemplate Example

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
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudTreeView CanActivate="true" Items="TreeItems" CanSelect="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>

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

Load data on demand

  • All Mail

    • Trash

      • Categories

        • History

          Hide code example
          Edit on TryMudBlazor
          Copy Code
          View the source on GitHub
          <MudTreeView ServerData="LoadServerData" Items="TreeItems" Width="350px">
              <ItemTemplate>
                  <MudTreeViewItem Value="@context" Icon="@context.Icon" Text="@context.Title" EndText="@context.Number?.ToString()" EndTextTypo="@Typo.caption" />
              </ItemTemplate>
          </MudTreeView>
          
          @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

          Hide code example
          Edit on TryMudBlazor
          Copy Code
          View the source on GitHub
          <MudTreeView Items="@TreeItems" MaxHeight="500px" Width="350px">
              <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>
          
          @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 🗙