Components / Navigation
Nav menu
A vertical list of navigation links with optional collapsible groups, usually placed in a drawer. Links highlight themselves when their address matches the current page.
MudNavMenuMudNavLinkMudNavGroup- MudBlazor reference ↗
- Page source ↗
Links and the active page
MudNavLink is a NavLink: with Match set to All it is active only on its exact address. These links point at real gallery pages, so the one for this page is highlighted.
Nested groups
MudNavGroup collapses a set of links under a title. Groups nest, can start expanded, and bind Expanded for control from code. Disabled links stay visible but inert.
Selected: Shop front
Density, margins and borders
Dense tightens each row, Margin adds space between links, and Bordered marks the active link with an edge that Rounded softens.
Default
Dense
Margin.Normal
Bordered and rounded
Active link colors
Color tints the active link of a bordered menu. Every value of Color, with the active page highlighted in each.
Color.Default
Color.Primary
Color.Secondary
Color.Tertiary
Color.Info
Color.Success
Color.Warning
Color.Error
Color.Dark
Color.Transparent
Color.Inherit
Color.Surface
Playground
Change the menu's parameters; the markup below shows only the values that differ from the defaults.
<MudNavMenu Color="Color.Primary" Bordered="true">
<MudNavLink
Href="components/nav-menu"
Match="NavLinkMatch.All"
Icon="@Icons.Material.Outlined.Home">Front desk</MudNavLink>
</MudNavMenu>