Basic Usage
<MudPaper Width="250px" Class="py-3" Elevation="0"> <MudNavMenu> <MudText Typo="Typo.h6" Class="px-4">My Application</MudText> <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">Secondary Text</MudText> <MudDivider Class="my-2"/> <MudNavLink Href="/dashboard">Dashboard</MudNavLink> <MudNavLink Href="/servers">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper>
Two Way Bind
MudNavGroup allows two-way binding in the Expanded property, so you can control what happens when expanded and collapsed.
The MudNavGroup is expanded
<MudPaper Width="250px" Class="py-3 mb-4" Elevation="0"> <MudNavMenu> <MudNavGroup Title="Settings" @bind-Expanded=_isExpanded> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> </MudNavMenu> </MudPaper> <MudText> The MudNavGroup is @if (_isExpanded) { <b class="mud-theme-tertiary rounded pa-2 ml-2">expanded</b> } else { <b class="mud-theme-error rounded pa-2 ml-2">collapsed</b> } </MudText>
@code{ bool _isExpanded = true; }
Sub Groups
NavMenu can have up to 4 sub groups within MudNavMenu itself.
<MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0"> <MudNavMenu Class="mud-width-full"> <MudText Typo="Typo.h6" Class="px-4">My Application</MudText> <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">Secondary Text</MudText> <MudDivider Class="my-2" /> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavGroup Title="Level 0" Icon="@Icons.Material.Filled.Settings" Expanded="true"> <MudNavGroup Title="Level 1" Icon="@Icons.Material.Filled.AdminPanelSettings" Expanded="true"> <MudNavGroup Title="Level 2" Icon="@Icons.Material.Filled.People" Expanded="true"> <MudNavGroup Title="Level 3" Icon="@Icons.Material.Filled.Lock" Expanded="true"> <MudNavLink Href="/delete" Icon="@Icons.Material.Filled.DeleteForever">Delete Password</MudNavLink> </MudNavGroup> </MudNavGroup> </MudNavGroup> </MudNavGroup> <MudNavLink Href="/billing" Icon="@Icons.Material.Filled.Receipt">Billing</MudNavLink> </MudNavMenu> </MudPaper>
Icons
You can use both the icons that come with MudBlazor or font icons. Read more about icons here.
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" rel="stylesheet"> <MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0"> <MudNavMenu Class="mud-width-full"> <MudText Typo="Typo.h6" Class="px-4">Material</MudText> <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">Icons</MudText> <MudDivider Class="my-2" /> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/servers" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/billing" Icon="@Icons.Material.Filled.Receipt" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Icon="@Icons.Material.Filled.Settings" Expanded="true"> <MudNavLink Href="/users" Icon="@Icons.Material.Filled.People" IconColor="Color.Success">Users</MudNavLink> <MudNavLink Href="/security" Icon="@Icons.Material.Filled.Security" IconColor="Color.Info">Security</MudNavLink> </MudNavGroup> </MudNavMenu> </MudPaper> <MudPaper Width="250px" Class="d-inline-flex py-3" Elevation="0"> <MudNavMenu Class="mud-width-full"> <MudText Typo="Typo.h6" Class="px-4">Font Awesome</MudText> <MudText Typo="Typo.body2" Class="px-4 mud-text-secondary">Icons</MudText> <MudDivider Class="my-2" /> <MudNavLink Href="/dashboard" Icon="fas fa-chart-line">Dashboard</MudNavLink> <MudNavLink Href="/servers" Icon="fas fa-server">Servers</MudNavLink> <MudNavLink Href="/billing" Icon="fas fa-receipt" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Icon="fas fa-cogs" Expanded="true"> <MudNavLink Href="/users" Icon="fas fa-users" IconColor="Color.Success">Users</MudNavLink> <MudNavLink Href="/security" Icon="fas fa-user-shield" IconColor="Color.Info">Security</MudNavLink> </MudNavGroup> </MudNavMenu> </MudPaper>
Bordered
<MudPaper Width="250px" Elevation="0" Class="py-3"> <MudNavMenu Bordered="true"> <MudNavLink Href="/dashboard">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper>
Color
<MudPaper Width="250px" Elevation="0" Class="py-3"> <MudNavMenu Color="Color.Info"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper> <MudPaper Width="250px" Elevation="0" Class="py-3"> <MudNavMenu Color="Color.Success" Bordered="true"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper>
Margin
<MudPaper Width="250px" Elevation="0" Class="py-1"> <MudNavMenu Margin="Margin.Dense" Color="Color.Warning"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/thelab" Icon="@Icons.Material.Filled.Science">The Lab</MudNavLink> </MudNavMenu> </MudPaper> <MudPaper Width="250px" Elevation="0" Class="py-1"> <MudNavMenu Margin="Margin.Normal" Color="Color.Error"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/thelab" Icon="@Icons.Material.Filled.Science">The Lab</MudNavLink> </MudNavMenu> </MudPaper>
Rounded
<MudPaper Width="250px" Elevation="0"> <MudNavMenu Rounded="true" Margin="Margin.Dense" Color="Color.Primary" Class="pa-2"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/thelab" Icon="@Icons.Material.Filled.Science">The Lab</MudNavLink> </MudNavMenu> </MudPaper> <MudPaper Width="250px" Elevation="0"> <MudNavMenu Rounded="true" Margin="Margin.Normal" Color="Color.Tertiary" Class="pa-2"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/thelab" Icon="@Icons.Material.Filled.Science">The Lab</MudNavLink> </MudNavMenu> </MudPaper>
Dense
<MudPaper Width="250px" Class="py-3" Elevation="0"> <MudNavMenu Dense="true" Color="Color.Info"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper> <MudPaper Width="250px" Class="py-3" Elevation="0"> <MudNavMenu Dense="true" Rounded="true" Margin="Margin.Dense" Color="Color.Secondary" Class="pa-2"> <MudNavLink Href="/dashboard" Icon="@Icons.Material.Filled.Dashboard">Dashboard</MudNavLink> <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Storage">Servers</MudNavLink> <MudNavLink Href="/billing" Disabled="true">Billing</MudNavLink> <MudNavGroup Title="Settings" Expanded="true"> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> <MudNavLink Href="/about">About</MudNavLink> </MudNavMenu> </MudPaper>