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

    TreeItemData ActivatedValue { get; set; }

    HashSet<TreeItemData> SelectedValues { get; set; }

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

    public TreeViewItemTemplateExample()
    {
        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;
    }
}

Custom Tree

When Content property is used, it will completely replace the default rendering of the MudTreeViewItem to use your own. Use Height or MaxHeight parameter 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 readonly string IconFile = "M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z";
    private readonly string IconProject = "M11.5,15.97L11.91,18.41C11.65,18.55 11.23,18.68 10.67,18.8C10.1,18.93 9.43,19 8.66,19C6.45,18.96 4.79,18.3 3.68,17.04C2.56,15.77 2,14.16 2,12.21C2.05,9.9 2.72,8.13 4,6.89C5.32,5.64 6.96,5 8.94,5C9.69,5 10.34,5.07 10.88,5.19C11.42,5.31 11.82,5.44 12.08,5.59L11.5,8.08L10.44,7.74C10.04,7.64 9.58,7.59 9.05,7.59C7.89,7.58 6.93,7.95 6.18,8.69C5.42,9.42 5.03,10.54 5,12.03C5,13.39 5.37,14.45 6.08,15.23C6.79,16 7.79,16.4 9.07,16.41L10.4,16.29C10.83,16.21 11.19,16.1 11.5,15.97M13.89,19L14.5,15H13L13.34,13H14.84L15.16,11H13.66L14,9H15.5L16.11,5H18.11L17.5,9H18.5L19.11,5H21.11L20.5,9H22L21.66,11H20.16L19.84,13H21.34L21,15H19.5L18.89,19H16.89L17.5,15H16.5L15.89,19H13.89M16.84,13H17.84L18.16,11H17.16L16.84,13Z";
    private readonly string IconSolution = "M17,8.5L12.25,12.32L17,16V8.5M4.7,18.4L2,16.7V7.7L5,6.7L9.3,10.03L18,2L22,4.5V20L17,22L9.34,14.66L4.7,18.4M5,14L6.86,12.28L5,10.5V14Z";
    private readonly string IconJson = "M5,3H7V5H5V10A2,2 0 0,1 3,12A2,2 0 0,1 5,14V19H7V21H5C3.93,20.73 3,20.1 3,19V15A2,2 0 0,0 1,13H0V11H1A2,2 0 0,0 3,9V5A2,2 0 0,1 5,3M19,3A2,2 0 0,1 21,5V9A2,2 0 0,0 23,11H24V13H23A2,2 0 0,0 21,15V19A2,2 0 0,1 19,21H17V19H19V14A2,2 0 0,1 21,12A2,2 0 0,1 19,10V5H17V3H19M12,15A1,1 0 0,1 13,16A1,1 0 0,1 12,17A1,1 0 0,1 11,16A1,1 0 0,1 12,15M8,15A1,1 0 0,1 9,16A1,1 0 0,1 8,17A1,1 0 0,1 7,16A1,1 0 0,1 8,15M16,15A1,1 0 0,1 17,16A1,1 0 0,1 16,17A1,1 0 0,1 15,16A1,1 0 0,1 16,15Z";


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

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

    public TreeViewCustomExample()
    {
        TreeItems.Add(new TreeItemData(".azure", Icons.Filled.Folder));
        TreeItems.Add(new TreeItemData(".github",Icons.Filled.Folder));
        TreeItems.Add(new TreeItemData(".vscode",Icons.Filled.Folder));
        TreeItems.Add(new TreeItemData("content", Icons.Filled.Folder));
        TreeItems.Add(new TreeItemData("src", Icons.Filled.Folder)
        {
            TreeItems = new HashSet<TreeItemData>()
            {
                new TreeItemData("MudBlazor", Icons.Filled.Folder),
                new TreeItemData("MudBlazor.Docs", Icons.Filled.Folder)
                {
                    TreeItems = new HashSet<TreeItemData>()
                    {
                        new TreeItemData("_Imports.razor", Icons.Filled.AlternateEmail),
                        new TreeItemData( "compilerconfig.json", IconJson),
                        new TreeItemData( "MudBlazor.Docs.csproj", IconProject),
                        new TreeItemData("NewFilesToBuild.txt" , IconFile),
                    }
                },
                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", IconFile),
                new TreeItemData("MudBlazor.sln", IconSolution)
            }
        });
        TreeItems.Add(new TreeItemData("History", Icons.Filled.Folder));
    }
}
Tooltip
Typography
An error has occurred. This application may no longer respond until reloaded. Reload 🗙