Menus

A list of choices displayed after clicking an element.

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

Rendered in 0 ms
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
<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>
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>
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" 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 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>Item 2</MudMenuItem>
            </ActivatorContent>

            <ChildContent>
                <MudMenuItem Href="/docs/overview">Item 2.1 Docs Overview</MudMenuItem>
                <MudMenuItem>Item 2.2 </MudMenuItem>
            </ChildContent>
        </MudMenu>
    </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>
Interaction
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>
Context Menu

It is possible to open a menu using custom logic. This is useful when implementing context menus. When Label, Icon and ActivatorContent are unset, no button is rendered and the menu can only be opened programmatically.

Istra Croatia

Peninsula in Europe

Try left clicking or right clicking the image to open the menu.

<MudCard>
    <MudCardHeader>
        <CardHeaderContent>
            <MudText Typo="Typo.body1">Istra Croatia</MudText>
            <MudText Typo="Typo.body2">Peninsula in Europe</MudText>
        </CardHeaderContent>
    </MudCardHeader>
    <div @onclick="@(OpenContextMenu)" @oncontextmenu="@(OpenContextMenu)" @oncontextmenu:preventDefault>
        <MudCardMedia Image="images/pilars.jpg" Height="250"/>
    </div>
    <MudCardContent>
        <MudText Typo="Typo.body2">Try left clicking or right clicking the image to open the menu.</MudText>
    </MudCardContent>
</MudCard>

<MudMenu Dense PositionAtCursor @ref="_contextMenu">
    <MudMenuItem>Cut</MudMenuItem>
    <MudMenuItem>Copy</MudMenuItem>
    <MudMenuItem>Paste</MudMenuItem>
    <MudMenuItem>Delete</MudMenuItem>
</MudMenu>

@code {
#nullable enable
    private MudMenu _contextMenu = null!;

    private async Task OpenContextMenu(MouseEventArgs args)
    {
        await _contextMenu.OpenMenuAsync(args);
    }
}
Placement

The component uses MudPopover to place its menu, which can be controlled with AnchorOrigin and TransformOrigin.
To learn and see all possible examples of how you can position the popover check out its 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}";
    }
    
}
An unhandled error has occurred. Reload 🗙