TreeView

Easily customizable tree view.

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

<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

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

        Use the Body Content instead of the Content render fragment, when you want your custom tree items, but still use the build-in icons and expansion buttons.

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

        <MudTreeView Items="@TreeItems" Hover="true" Width="100%">
    <ItemTemplate Context="item">
        <MudTreeViewItem Items="@item.TreeItems" Icon="@item.Icon">
            <BodyContent>
                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
                    <MudText Style="justify-self: start;">@item.Text</MudText>
                    <div style="justify-self: end;">
                        <MudIconButton Icon="@Icons.Material.Filled.Edit" Size="Size.Medium" Color="Color.Inherit" />
                        <MudIconButton Icon="@Icons.Material.Filled.Delete" Size="Size.Medium" Color="Color.Inherit" />
                    </div>
                </div>
            </BodyContent>
        </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 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(".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
        An unhandled error has occurred. Reload 🗙