Menus

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

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"   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">
    <MudMenuItem>Profile</MudMenuItem>
    <MudMenuItem>My account</MudMenuItem>
    <MudMenuItem>Logout</MudMenuItem>
</MudMenu>

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

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

<MudMenu Icon="@Icons.Material.Filled.Build" Disabled="true">
    <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
<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 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 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 Image="images/toiletvisit.jpg" />
    </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 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 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 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 @bind-SelectedOption="@AnchorOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Primary" Dense="true" Option="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 @bind-SelectedOption="@TransformOrigin" Class="d-flex flex-column">
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopLeft">Top-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopCenter">Top-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.TopRight">Top-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterLeft">Center-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterCenter">Center-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.CenterRight">Center-Right</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.BottomLeft">Bottom-Left</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="Origin.BottomCenter">Bottom-Center</MudRadio>
            <MudRadio Color="Color.Secondary" Dense="true" Option="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}";
    }
    
}
Click and Touch Events

On mobile devices the default OnClick handler will not be invoked. You must add a OnTouch handler as well if mobile support is desired. 

@inject ISnackbar Snackbar

<MudMenu Label="Open Menu" Variant="Variant.Filled" Color="Color.Primary">
    <MudMenuItem OnClick="OnClick">OnClick Only</MudMenuItem>
    <MudMenuItem OnTouch="OnTouch">OnTouch Only</MudMenuItem>
    <MudMenuItem OnClick="OnClick" OnTouch="OnTouch">Both OnClick and OnTouch</MudMenuItem>
</MudMenu>

@code {
    private void OnClick(MouseEventArgs args) => Snackbar.Add("OnClick Invoked");
    private void OnTouch(TouchEventArgs args) => Snackbar.Add("OnTouch Invoked");
}
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> Item 1.1 </MudMenuItem>
                <MudMenuItem> Item 1.2 </MudMenuItem>
            </ChildContent>
        </MudMenu>
    </MudMenuItem>

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

            <ChildContent>
                <MudMenuItem> Item 2.1 </MudMenuItem>
                <MudMenuItem> Item 2.2 </MudMenuItem>
            </ChildContent>
        </MudMenu>
    </MudMenuItem>
</MudMenu>
List
Message Box
An unhandled error has occurred. Reload 🗙