MudBlazor - Blazor Component Library

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

Expand on double click

With ExpandOnDoubleClick, similar to ExpandOnClick, double clicking on the whole item row will expand/collapse the sub trees. Additionally, OnDoubleClick callback can be assigned to set a custom double click behaviour.

Applications
- Terminal
Documents
- MudBlazor
  Api
  
  Components

<MudTreeView T="string" ExpandOnDoubleClick="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.Material.Filled.Email" />
    <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Material.Filled.Drafts" />
    <MudTreeViewItem Value='"Orders"' Icon="@Icons.Material.Filled.Label" IconColor="Color.Success" />
    <MudTreeViewItem Value='"Categories"' Icon="@Icons.Material.Filled.Label" IconColor="Color.Error" ExpandedIcon="@Icons.Material.Filled.ArrowRight">
        <MudTreeViewItem Value='"Social"' Icon="@Icons.Material.Filled.Group" />
        <MudTreeViewItem Value='"Updates"' Icon="@Icons.Material.Filled.Info" IconColor="Color.Warning" />
        <MudTreeViewItem Value='"Forums"' Icon="@Icons.Material.Filled.QuestionAnswer" />
        <MudTreeViewItem Value='"Spam"' Icon="@Icons.Material.Filled.LocalOffer" />
    </MudTreeViewItem>
    <MudTreeViewItem Value='"Trash"' Icon="@Icons.Material.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.Material.Filled.Email" />
        <MudTreeViewItem Value='"Drafts"' Icon="@Icons.Material.Filled.Drafts" />
        <MudTreeViewItem Value='"Orders"' Icon="@Icons.Material.Filled.Label" />
        <MudTreeViewItem Value='"Categories"' Icon="@Icons.Material.Filled.Label">
            <MudTreeViewItem Value='"Social"' Icon="@Icons.Material.Filled.Group" />
            <MudTreeViewItem Value='"Updates"' Icon="@Icons.Material.Filled.Info" />
            <MudTreeViewItem Value='"Forums"' Icon="@Icons.Material.Filled.QuestionAnswer" />
            <MudTreeViewItem Value='"Spam"' Icon="@Icons.Material.Filled.LocalOffer" />
        </MudTreeViewItem>
        <MudTreeViewItem Value='"Trash"' Icon="@Icons.Material.Filled.Delete" />
    </MudTreeView>
    </MudItem>
    <MudItem xs="12" md="4">
        <MudSelect Label="Color" 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" 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.Material.Filled.Email));
        TreeItems.Add(new TreeItemData("Trash", Icons.Material.Filled.Delete));
        TreeItems.Add(new TreeItemData("Categories", Icons.Material.Filled.Label)
        {
            IsExpanded = true,
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("Social", Icons.Material.Filled.Group, 90),
                new TreeItemData("Updates", Icons.Material.Filled.Info, 2294),
                new TreeItemData("Forums", Icons.Material.Filled.QuestionAnswer, 3566),
                new TreeItemData("Promotions", Icons.Material.Filled.LocalOffer, 733)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Material.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. It can also be disabled for certain items with the CanExpand property.

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" CanExpand="@context.CanExpand" 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 bool CanExpand { get; set; }

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

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

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

    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.Material.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.Material.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Compiler", Icons.Material.Filled.Folder),
                new TreeItemData("MudBlazor.Docs.Server", Icons.Material.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests", Icons.Material.Filled.Folder),
                new TreeItemData("MudBlazor.UnitTests.Viewer", Icons.Material.Filled.Folder),
                new TreeItemData(".editorconfig", Icons.Custom.FileFormats.FileCode),
                new TreeItemData("MudBlazor.sln", Icons.Custom.Brands.MicrosoftVisualStudio)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Material.Filled.Folder));
    }
}

Custom Checkbox Behavior

You can use the Content property to support custom checkbox behavior such as automatically checking a parent item when all children are selected.

Fruits
- Apple
- Banana
- Orange
- Pear
- Pineapple
Grains
- Barley
- Oats
- Rice
Vegetables
- Carrot
- Leek
- Onion
- Potato

<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" />
				  <MudCheckBox T="bool?" Checked="@(context.HasPartialChildSelection() ? null : context.IsChecked)" CheckedChanged="@((e) => CheckedChanged(context))"></MudCheckBox>
				  <MudText>@context.Text</MudText>
			  </Content>
		  </MudTreeViewItem>
	  </ItemTemplate>
  </MudTreeView>
</MudPaper>

@code {

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

  public class TreeItemData
  {
    public TreeItemData Parent { get; set; } = null;

    public string Text { get; set; }

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

    public bool IsChecked { get; set; } = false;

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

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

    public TreeItemData(string text)
    {
      Text = text;
    }

    public void AddChild(string itemName)
    {
      TreeItemData item = new TreeItemData(itemName);
      item.Parent = this;
      this.TreeItems.Add(item);
    }

    public bool HasPartialChildSelection()
    {
      int iChildrenCheckedCount = (from c in TreeItems where c.IsChecked select c).Count();
      return HasChild && iChildrenCheckedCount > 0 && iChildrenCheckedCount < TreeItems.Count();
    }

  }

  protected void CheckedChanged(TreeItemData item)
  {
    item.IsChecked = !item.IsChecked;
    // checked status on any child items should mirrror this parent item
    if (item.HasChild)
    {
      foreach (TreeItemData child in item.TreeItems)
      {
        child.IsChecked = item.IsChecked;
      }
    }
    // if there's a parent and all children are checked/unchecked, parent should match
    if (item.Parent != null)
    {
      item.Parent.IsChecked = !item.Parent.TreeItems.Any(i => !i.IsChecked);
    }
	}

	protected override void OnInitialized()
	{
		TreeItemData itemFruits = new TreeItemData("Fruits");
		TreeItemData itemVeg = new TreeItemData("Vegetables");
		TreeItemData itemGrains = new TreeItemData("Grains");

		itemFruits.AddChild("Apple");
		itemFruits.AddChild("Banana");
		itemFruits.AddChild("Orange");
		itemFruits.AddChild("Pear");
		itemFruits.AddChild("Pineapple");

		itemGrains.AddChild("Barley");
		itemGrains.AddChild("Oats");
		itemGrains.AddChild("Rice");

		itemVeg.AddChild("Carrot");
		itemVeg.AddChild("Leek");
		itemVeg.AddChild("Onion");
		itemVeg.AddChild("Potato");

		TreeItems.Add(itemFruits);
		TreeItems.Add(itemGrains);
		TreeItems.Add(itemVeg);
	}
}

Tooltip

Typography