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.
<MudPaper Width="250px" Class="py-3 mb-4" Elevation="0"> <MudNavMenu> <MudNavGroup Title="Settings" @bind-Expanded=_expanded> <MudNavLink Href="/users">Users</MudNavLink> <MudNavLink Href="/security">Security</MudNavLink> </MudNavGroup> </MudNavMenu> </MudPaper> <MudText> The MudNavGroup is @if (_expanded) { <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 _expanded = true; }