Mudblazor

Community Support

Discord

Gitter

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

Gitter

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

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