Navigation Menu

API
Basic Usage

My Application

Secondary Text

Dashboard
Servers
Billing
Users
Security
About
<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.

Users
Security

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.

My Application

Secondary Text

Dashboard
Delete Password
Billing
<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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavGroup Title="Level 0" Icon="@Icons.Filled.Settings" Expanded="true">
            <MudNavGroup Title="Level 1" Icon="@Icons.Filled.AdminPanelSettings" Expanded="true">
                <MudNavGroup Title="Level 2" Icon="@Icons.Filled.People" Expanded="true">
                    <MudNavGroup Title="Level 3" Icon="@Icons.Filled.Lock" Expanded="true">
                        <MudNavLink Href="/delete" Icon="@Icons.Filled.DeleteForever">Delete Password</MudNavLink>
                    </MudNavGroup>
                </MudNavGroup>
            </MudNavGroup>
        </MudNavGroup>
        <MudNavLink Href="/billing" Icon="@Icons.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.

Material

Icons

Dashboard
Servers
Billing
Users
Security
Font Awesome

Icons

Dashboard
Servers
Billing
Users
Security
<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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/servers" Icon="@Icons.Filled.Storage">Servers</MudNavLink>
        <MudNavLink Href="/billing" Icon="@Icons.Filled.Receipt" Disabled="true">Billing</MudNavLink>
        <MudNavGroup Title="Settings" Icon="@Icons.Filled.Settings" Expanded="true">
            <MudNavLink Href="/users" Icon="@Icons.Filled.People" IconColor="Color.Success">Users</MudNavLink>
            <MudNavLink Href="/security" Icon="@Icons.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

Dashboard
Servers
Billing
Users
Security
About
<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

Dashboard
Servers
Billing
Users
Security
About
Dashboard
Servers
Billing
Users
Security
About
<MudPaper Width="250px" Elevation="0" Class="py-3">
    <MudNavMenu Color="Color.Info">
        <MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.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

Dashboard
Servers
The Lab
Dashboard
Servers
The Lab
<MudPaper Width="250px" Elevation="0" Class="py-1">
    <MudNavMenu Margin="Margin.Dense" Color="Color.Warning">
        <MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Filled.Storage">Servers</MudNavLink>
        <MudNavLink Href="/thelab" Icon="@Icons.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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Filled.Storage">Servers</MudNavLink>
        <MudNavLink Href="/thelab" Icon="@Icons.Filled.Science">The Lab</MudNavLink>
    </MudNavMenu>
</MudPaper>
Rounded

Dashboard
Servers
The Lab
Dashboard
Servers
The Lab
<MudPaper Width="250px" Elevation="0">
    <MudNavMenu Rounded="true" Margin="Margin.Dense" Color="Color.Primary" Class="pa-2">
        <MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Filled.Storage">Servers</MudNavLink>
        <MudNavLink Href="/thelab" Icon="@Icons.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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Match="NavLinkMatch.Prefix" Href="/components/navmenu" Icon="@Icons.Filled.Storage">Servers</MudNavLink>
        <MudNavLink Href="/thelab" Icon="@Icons.Filled.Science">The Lab</MudNavLink>
    </MudNavMenu>
</MudPaper>
Dense

Dashboard
Servers
Billing
Users
Security
About
Dashboard
Servers
Billing
Users
Security
About
<MudPaper Width="250px" Class="py-3" Elevation="0">
    <MudNavMenu Dense="true" Color="Color.Info">
        <MudNavLink Href="/dashboard" Icon="@Icons.Filled.Dashboard">Dashboard</MudNavLink>
            <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.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.Filled.Dashboard">Dashboard</MudNavLink>
        <MudNavLink Href="/components/navmenu" Match="NavLinkMatch.Prefix" Icon="@Icons.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>
Message Box
Overlay
An unhandled error has occurred. Reload 🗙