Simple Tree View
content
logo.png
MudBlazor.svg
Nuget.png
src
MudBlazor
MudBlazor.Docs
wwwroot
MudAppbarCorner.svg
MudBlazorDocs.min.css
<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
<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:
<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
<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
<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
<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
<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
90Updates
2294Forums
3566Promotions
733
History
Activated item:
Sum of selected items: 0
<MudTreeView CanActivate="true" Items="TreeItems" CanSelect="true" @bind-ActivatedValue="ActivatedValue" @bind-SelectedValues="SelectedValues"> <ItemTemplate> <MudTreeViewItem @bind-Expanded="@context.IsExpanded" Items="@context.TreeItems" Value="" 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
<MudTreeView Items="" 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)); } }