MudBlazor

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.Filled.KeyboardArrowDown" IconColor="Color.Secondary" >
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu StartIcon="@Icons.Filled.Translate" EndIcon="@Icons.Filled.KeyboardArrowDown" Label="Swedish" Color="Color.Primary" Variant="Variant.Filled">
    <MudMenuItem>Swedish</MudMenuItem>
    <MudMenuItem>Old Norse</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
<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>
    <ActivatorContent>
        <MudAvatar Image="_content/MudBlazor.Docs/images/toiletvisit.png" />
    </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>

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" OffsetY>
    <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>

With the property PositionAtCurser, 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="_content/MudBlazor.Docs/images/content-template-door.png" 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.Filled.SouthEast;
                break;
            case Origin.TopCenter:
                icon = Icons.Filled.South;
                break;
            case Origin.TopRight:
                icon = Icons.Filled.SouthWest;
                break;
            case Origin.CenterLeft:
                icon = Icons.Filled.East;
                break;
            case Origin.CenterCenter:
                icon = Icons.Filled.ZoomOutMap;
                break;
            case Origin.CenterRight:
                icon = Icons.Filled.West;
                break;
            case Origin.BottomLeft:
                icon = Icons.Filled.NorthEast;
                break;
            case Origin.BottomCenter:
                icon = Icons.Filled.North;
                break;
            case Origin.BottomRight:
                icon = Icons.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 error has occurred. This application may no longer respond until reloaded. Reload 🗙