Menus

The component shows a menu at the position of the element used to activate it.

Simple Menu

<MudMenu Label="Open Menu">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Open Dense Menu" Dense="true">
    <MudMenuItem>Dense Stuff</MudMenuItem>
    <MudMenuItem>Stuff is Dense</MudMenuItem>
    <MudMenuItem>Soo Dense</MudMenuItem>
</MudMenu>
Customization

The menu button gives you all the options a regular button would do.

<MudMenu Label="Open Menu">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Open Menu" Variant="Variant.Filled" Color="Color.Primary">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Open Menu" Variant="Variant.Outlined" Color="Color.Secondary">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Open Menu" Variant="Variant.Filled" Disabled="true">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Icon Color" Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" IconColor="Color.Secondary" >
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu StartIcon="@Icons.Material.Filled.Translate" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" Label="Swedish" Color="Color.Primary" Variant="Variant.Filled">
    <MudMenuItem>Swedish</MudMenuItem>
    <MudMenuItem>Old Norse</MudMenuItem>
</MudMenu>
<MudMenu Label="Menu with Icons">
    <MudMenuItem IconSize="Size.Small" IconColor="Color.Primary"   Icon="@Icons.Material.Filled.Chair">Chair</MudMenuItem>
    <MudMenuItem                                                   Icon="@Icons.Material.Filled.DoorFront">Door</MudMenuItem>
    <MudMenuItem IconSize="Size.Large" IconColor="Color.Secondary" Icon="@Icons.Material.Filled.Window">Window</MudMenuItem>
</MudMenu>

Copyright © 2020-2024 MudBlazor.

Powered by .NET 8.0.8

An error has occurred. This application may no longer respond until reloaded. Reload 🗙