Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

Menus

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

See Menus API for parameter documentation.

Simple Menu

Enlist

Barracks

Armory

Dense Stuff

Stuff is Dense

Soo Dense

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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.

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Swedish

Old Norse

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>

Menu Width

The default width of the menu popover is determen by the contents width, you can override this with the FullWidth property to make it as wide as the parent.

1

2

3

1

2

3

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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 scroll instead.

Long

List

Is

To

Long

Lets

Limit

Height

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>

Direction

Control where the menu should start from relative to the parent. Where Top-Left is the default.

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudMenu Label="Direction Left" Variant="Variant.Filled" Color="Color.Info" Direction="Direction.Left">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Direction Top" Variant="Variant.Filled" Color="Color.Success" Direction="Direction.Top">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Direction Bottom" Variant="Variant.Filled" Color="Color.Warning" Direction="Direction.Bottom">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Direction Right" Variant="Variant.Filled" Color="Color.Error" Direction="Direction.Right">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

Offset

Offset the menu to be located outside of the parent.

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Enlist

Barracks

Armory

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudMenu Label="Offset Left" Variant="Variant.Filled" Color="Color.Default" Direction="Direction.Left" OffsetX="true">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Offset Top" Variant="Variant.Filled" Color="Color.Primary" Direction="Direction.Top" OffsetY="true">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Offset Bottom" Variant="Variant.Filled" Color="Color.Secondary" Direction="Direction.Bottom" OffsetY="true">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

<MudMenu Label="Offset Right" Variant="Variant.Filled" Color="Color.Tertiary" Direction="Direction.Right" OffsetX="true">
    <MudMenuItem>Enlist</MudMenuItem>
    <MudMenuItem>Barracks</MudMenuItem>
    <MudMenuItem>Armory</MudMenuItem>
</MudMenu>

Icon Buttons

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

Profile

My account

Logout

Profile

My account

Logout

Profile

My account

Logout

Profile

My account

Logout

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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>

Usage

The menu items also acts like buttons, simply assign them a onclick event or a link.

Link

On Click

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudMenu Label="@Message" Color="Color.Primary">
    <MudMenuItem Link="/components/button">Link</MudMenuItem>
    <MudMenuItem OnClick="AddMessage">On Click</MudMenuItem>
</MudMenu>
@code {
    string Message { get; set; } = "Open Usage Menu";

    void AddMessage()
    {
        Message = "Menu Item clicked";
    }
}

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 elements there.

Account

Profile

Theme

Usage

Sign Out

Profile

Theme

Usage

Sign Out

Dense Error

Profile

Theme

Usage

Sign Out

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Profile

Theme

Usage

Sign Out

Right click

Profile

Theme

Usage

Sign Out

Mouse over

Profile

Theme

Usage

Sign Out

Show code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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">
    <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 in 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.

Cut

Copy

Paste

Delete

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudMenu PositionAtCurser="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>
An error has occurred. This application may no longer respond until reloaded. Reload 🗙