Menus

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

Note: Blazor static rendering is not supported. See install guide for more info.

API
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" Disabled="true" 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>

<MudMenu Label="Default Menu Width" Variant="Variant.Filled" Color="Color.Primary">
    <MudMenuItem>1</MudMenuItem>
    <MudMenuItem>2</MudMenuItem>
    <MudMenuItem>3</MudMenuItem>
</MudMenu>

<MudMenu Label="Full Menu Width" Variant="Variant.Filled" Color="Color.Primary" FullWidth="true">
    <MudMenuItem>1</MudMenuItem>
    <MudMenuItem>2</MudMenuItem>
    <MudMenuItem>3</MudMenuItem>
</MudMenu>
Max Height Menu

If you have a long list, you can use the MaxHeight property to set the maximum height and enable scrolling instead.

<MudMenu Label="Max Height Menu" MaxHeight="200" FullWidth="true">
    <MudMenuItem>Long</MudMenuItem>
    <MudMenuItem>List</MudMenuItem>
    <MudMenuItem>Is</MudMenuItem>
    <MudMenuItem>To</MudMenuItem>
    <MudMenuItem>Long</MudMenuItem>
    <MudMenuItem>Lets</MudMenuItem>
    <MudMenuItem>Limit</MudMenuItem>
    <MudMenuItem>Height</MudMenuItem>
</MudMenu>
Icon Buttons

If an Icon is supplied through the Icon property, the menu button will display as an IconButton.

<MudMenu Icon="@Icons.Material.Filled.MoreVert"
         AriaLabel="Open user menu">
    <MudMenuItem>Profile</MudMenuItem>
    <MudMenuItem>My account</MudMenuItem>
    <MudMenuItem>Logout</MudMenuItem>
</MudMenu>

<MudMenu Icon="@Icons.Material.Filled.Settings"
         Color="Color.Primary"
         AriaLabel="Open user menu">
    <MudMenuItem>Profile</MudMenuItem>
    <MudMenuItem>My account</MudMenuItem>
    <MudMenuItem>Logout</MudMenuItem>
</MudMenu>

<MudMenu Icon="@Icons.Material.Filled.Favorite"
         Color="Color.Secondary"
         AriaLabel="Open user menu">
    <MudMenuItem>Profile</MudMenuItem>
    <MudMenuItem>My account</MudMenuItem>
    <MudMenuItem>Logout</MudMenuItem>
</MudMenu>

<MudMenu Icon="@Icons.Material.Filled.Build"
         Disabled="true"
         AriaLabel="Open user menu">
    <MudMenuItem>Profile</MudMenuItem>
    <MudMenuItem>My account</MudMenuItem>
    <MudMenuItem>Logout</MudMenuItem>
</MudMenu>
Custom Activator

Using ActivatorContent, you can use any user interface element to activate the menu on click. You can place a completely customized button or any other element there.

Account
Disabled
Dense Error
<MudMenu FullWidth="true">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">I am a button</MudButton>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu FullWidth="true">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Person" Color="Color.Primary">Account</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu FullWidth="true" Disabled="true">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Person" Disabled="true" Color="Color.Primary">Disabled</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu>
    <ActivatorContent>
        <MudAvatar>
            <MudImage Src="images/toiletvisit.jpg" />
        </MudAvatar>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu FullWidth="true">
    <ActivatorContent>
        <MudAlert Severity="Severity.Error" Variant="Variant.Filled" Dense="true">Dense Error</MudAlert>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>
Mouse Events

With the property ActivationEvent, the menu can be opened on different mouse events.

Left click
Right click
Mouse over
<MudMenu FullWidth="true" ActivationEvent="@MouseEvent.LeftClick">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Mouse" Color="Color.Primary">Left click</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu ActivationEvent="@MouseEvent.RightClick">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Mouse" Color="Color.Primary">Right click</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>

<MudMenu FullWidth="true" ActivationEvent="@MouseEvent.MouseOver" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Mouse" Color="Color.Primary">Mouse over</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Profile</MudMenuItem>
        <MudMenuItem>Theme</MudMenuItem>
        <MudMenuItem>Usage</MudMenuItem>
        <MudMenuItem>Sign Out</MudMenuItem>
    </ChildContent>
</MudMenu>
Cursor Position

With the property PositionAtCursor, the menu will open at the location of the click.

Old Paint

Old paint found on a stone house door.

This photo was taken in a small village in Istra Croatia.

<MudMenu PositionAtCursor="true">
    <ActivatorContent>
        <MudCard>
            <MudCardMedia Image="images/door.jpg" Height="200" />
            <MudCardContent>
                <MudText Typo="Typo.h5">Old Paint</MudText>
                <MudText Typo="Typo.body2">Old paint found on a stone house door.</MudText>
                <MudText Typo="Typo.body2">This photo was taken in a small village in Istra Croatia.</MudText>
            </MudCardContent>
        </MudCard>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem>Cut</MudMenuItem>
        <MudMenuItem>Copy</MudMenuItem>
        <MudMenuItem>Paste</MudMenuItem>
        <MudMenuItem>Delete</MudMenuItem>
    </ChildContent>
</MudMenu>
Placement

The component uses MudPopover to place it's menu. It can be controlled with AnchorOrigin and TransformOrigin
To learn and see all posibile examples of how you can position the popover check out popover's documentation page.

Anchor Origin
Transform Origin
<MudGrid>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Anchor Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="AnchorOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
    <MudItem xs="6" Class="d-flex justify-center align-center">
        <MudBadge Origin="@AnchorOrigin" Color="Color.Primary" Icon="@GetIcon()" Overlap="true" Elevation="4">
            <MudMenu Label="Advanced Placement" Variant="Variant.Filled" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Color="Color.Default" Size="Size.Large">
                <MudMenuItem>Enlist</MudMenuItem>
                <MudMenuItem>Barracks</MudMenuItem>
                <MudMenuItem>Armory</MudMenuItem>
            </MudMenu>
        </MudBadge>
    </MudItem>
    <MudItem xs="3">
        <MudText Typo="Typo.h6">Transform Origin</MudText>
        <MudRadioGroup T="Origin" @bind-Value="TransformOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Value="Origin.BottomRight">Bottom-Right</MudRadio>
        </MudRadioGroup>
    </MudItem>
</MudGrid>

@code{ 
    
    public Origin TransformOrigin { get; set; } = Origin.TopLeft;
    public Origin AnchorOrigin { get; set; } = Origin.BottomLeft;

    public string GetIcon()
    {
        string icon = "";

        switch (TransformOrigin)
        {
            case Origin.TopLeft:
                icon = Icons.Material.Filled.SouthEast;
                break;
            case Origin.TopCenter:
                icon = Icons.Material.Filled.South;
                break;
            case Origin.TopRight:
                icon = Icons.Material.Filled.SouthWest;
                break;
            case Origin.CenterLeft:
                icon = Icons.Material.Filled.East;
                break;
            case Origin.CenterCenter:
                icon = Icons.Material.Filled.ZoomOutMap;
                break;
            case Origin.CenterRight:
                icon = Icons.Material.Filled.West;
                break;
            case Origin.BottomLeft:
                icon = Icons.Material.Filled.NorthEast;
                break;
            case Origin.BottomCenter:
                icon = Icons.Material.Filled.North;
                break;
            case Origin.BottomRight:
                icon = Icons.Material.Filled.NorthWest;
                break;
        }
        return icon;
    }

    public string GetLocation()
    {
        string align = "";
        string justify = "";
        string[] pos = TransformOrigin.ToDescriptionString().Split("-");

        if (pos[0] == "center")
        {
            align = "align-center";
        }
        else if (pos[0] == "top")
        {
            align = "align-start";
        }
        else if (pos[0] == "bottom")
        {
            align = "align-end";
        }
        if (pos[1] == "left")
        {
            justify = "justify-start";
        }
        else if (pos[1] == "right")
        {
            justify = "justify-end";
        }
        else if (pos[1] == "center")
        {
            justify = "justify-center";
        }

        return $"absolute mud-height-full mud-width-full d-flex ma-n3 {align} {justify}";
    }
    
}
Nested Menu

Multiple menus can be nested. With the ActivationEvent="MouseEvent.MouseOver" property, a MudMenu component can be used inside of a MudMenuItem component to create a simple nested menu. 

<MudMenu Label="Open Menu" Variant="Variant.Filled" Color="Color.Primary" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.TopLeft" Dense>
    <MudMenuItem>
        <MudMenu ActivationEvent="MouseEvent.MouseOver" AnchorOrigin="Origin.TopRight" TransformOrigin="Origin.TopLeft" Dense>
            <ActivatorContent>
                <MudMenuItem> Item 1 </MudMenuItem>
            </ActivatorContent>

            <ChildContent>
                <MudMenuItem Href="https://mudblazor.com" Target="_blank"> Open https://mudblazor.com in new tab </MudMenuItem>
                <MudMenuItem Href="/" Disabled="true"> Disabled Item 1.2 with navigation </MudMenuItem>
            </ChildContent>
        </MudMenu>
    </MudMenuItem>

    <MudMenuItem>
        <MudMenu ActivationEvent="MouseEvent.MouseOver" AnchorOrigin="Origin.TopRight" TransformOrigin="Origin.TopLeft" Dense>
            <ActivatorContent>
                <MudMenuItem Href="/">Item 2</MudMenuItem>
            </ActivatorContent>

            <ChildContent>
                <MudMenuItem Href="/docs/overview"> Item 2.1 Docs Overview</MudMenuItem>
                <MudMenuItem > Item 2.2 </MudMenuItem>
            </ChildContent>
        </MudMenu>
    </MudMenuItem>
</MudMenu>
An unhandled error has occurred. Reload 🗙