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

Navigation Menu

See Navigation Menu API for parameter documentation.

Basic Usage

My Application

Secondary Text


Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="250px" Class="py-3" Square="true">
    <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>

MudNavGroup Two Way Bind

MudNavGroup admits two-way binding in the Expanded property, so you can control what happens on expanding and collapsing

My Application

Secondary Text



The MudNavGroup is expanded

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="250px" Class="py-3" Square="true">
    <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" />
        <MudNavGroup Title="Settings" @bind-Expanded=_isExpanded>
            <MudNavLink Href="/users">Users</MudNavLink>
            <MudNavLink Href="/security">Security</MudNavLink>
        </MudNavGroup>
    </MudNavMenu>
</MudPaper>
<br />
<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;
}

Icons

You can use both the icons that comes with MudBlazor or font icons read more about icons here.

Material

Icons


Font Awesome

Icons


Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudPaper Width="250px" Class="d-inline-flex py-3" Square="true">
    <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" Square="true">
    <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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙