MudBlazor - Blazor Component Library

Layout

Display

Z-Index

Overflow

Flexbox

Spacing

Borders

Interactivity

Menus

An interactive menu that displays a list of options.

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

API

<MudMenu>
- <MudMenuItem>

Basic Usage

<MudMenu Label="Open Menu">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

Dense Menu

Dense menus are more compact than regular menus and open instantly, suitable for desktop platforms.

<MudMenu Label="Open Dense Menu" Dense="true">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

Activator

The activator is the element responsible for spawning the menu popover.

Default Button

The default menu button provides many of the same options as a standard button.

<MudMenu Label="Open Menu" Color="Color.Primary" Size="Size.Large" Variant="Variant.Filled">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudMenu Label="Open Menu" Color="Color.Secondary" Size="Size.Medium" Variant="Variant.Text">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudMenu Label="Open Menu" Color="Color.Tertiary" Size="Size.Small" Variant="Variant.Outlined">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudMenu Label="EndIcon" Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.KeyboardArrowDown">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudMenu Label="EndIcon + IconColor" Variant="Variant.Filled" EndIcon="@Icons.Material.Filled.KeyboardArrowDown" IconColor="Color.Secondary">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudMenu Label="StartIcon + EndIcon" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.Translate" EndIcon="@Icons.Material.Filled.KeyboardArrowDown">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

Icon Button

When the Icon property is specified, the activator is rendered as a MudIconButton instead. Note: This is not the same as StartIcon or EndIcon which are used to add icons to the default button activator as seen above.

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

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

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

Custom Activator

If the regular customization options are not enough, use the ActivatorContent render fragment to define a custom activator element for opening the menu. In this example, a custom button, chip, and avatar are each used to open a menu.

Chip

<MudMenu>
    <ActivatorContent>
        <MudButton Variant="Variant.Filled" Color="Color.Primary">Button</MudButton>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem Label="Profile" />
        <MudMenuItem Label="Theme" />
        <MudMenuItem Label="Usage" />
    </ChildContent>
</MudMenu>

<MudMenu>
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Person" Color="Color.Primary">Chip</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem Label="Profile" />
        <MudMenuItem Label="Theme" />
        <MudMenuItem Label="Usage" />
    </ChildContent>
</MudMenu>

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

Menu Content

Item Icons

Use the Icon property on a menu item to show an icon and IconColor to change its color.

<MudMenu Label="Open Menu with Icons">
    <MudMenuItem Icon="@Icons.Material.Filled.Chair" Label="Chair" />
    <MudMenuItem Icon="@Icons.Material.Filled.DoorFront" IconColor="Color.Secondary" Label="Door" />
    <MudMenuItem Icon="@Icons.Material.Filled.Window" IconColor="Color.Tertiary" Label="Window" />
</MudMenu>

<MudMenu Label="Open Menu with Dense Icons" Dense>
    <MudMenuItem Icon="@Icons.Material.Filled.Chair" Label="Chair" />
    <MudMenuItem Icon="@Icons.Material.Filled.DoorFront" IconColor="Color.Secondary" Label="Door" />
    <MudMenuItem Icon="@Icons.Material.Filled.Window" IconColor="Color.Tertiary" Label="Window" />
</MudMenu>

Divider

You can insert a MudDivider between menu items to separate them.

<MudMenu Label="Open Menu with Divider">
    <MudMenuItem Label="Preview" Icon="@Icons.Material.Filled.Visibility" />
    <MudMenuItem Label="Share" Icon="@Icons.Material.Filled.Share" />
    <MudMenuItem Label="Get Link" Icon="@Icons.Material.Filled.Link" />
    <MudDivider />
    <MudMenuItem Label="Remove" Icon="@Icons.Material.Filled.Delete" />
</MudMenu>

Max Height

The menu's height is automatically restricted to the viewport if it gets too large, but if you need it to be a specific number of pixels you can use the MaxHeight property.

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

Nested Menu (Desktop)

Cascading menus, also known as nested menus, allow users to navigate a wide range of options by presenting menus with multiple levels of hierarchy. Click or hover your mouse over submenus (denoted by an arrow icon) to open them.

<MudMenu Label="Open Nested Menu" Dense>
    <MudMenuItem Label="Add reaction" />
    <MudMenuItem Label="Add bookmark" />

    <MudMenu Label="Format">
        <MudMenu Label="Text" StartIcon="@Icons.Material.Filled.FormatBold">
            <MudMenuItem Label="Bold" Icon="@Icons.Material.Filled.FormatBold" />
            <MudMenuItem Label="Italic" Icon="@Icons.Material.Filled.FormatItalic" />
            <MudMenuItem Label="Underline" Icon="@Icons.Material.Filled.FormatUnderlined" />

            <MudMenu Label="Size">
                <MudMenuItem Label="Increase font size" />
                <MudMenuItem Label="Decrease font size" />
            </MudMenu>
        </MudMenu>

        <MudMenu Label="Points">
            <MudMenuItem Label="Bullet" Icon="@Icons.Material.Filled.FormatListBulleted" IconColor="Color.Secondary" />
            <MudMenuItem Label="Number" Icon="@Icons.Material.Filled.FormatListNumbered" IconColor="Color.Secondary" />
        </MudMenu>

        <MudMenu Label="Alignment">
            <MudMenuItem Label="Left" Icon="@Icons.Material.Filled.FormatAlignLeft" IconColor="Color.Tertiary" />
            <MudMenuItem Label="Right" Icon="@Icons.Material.Filled.FormatAlignRight" IconColor="Color.Tertiary" />
        </MudMenu>

        <MudMenuItem Label="Clear formatting" />
        <MudMenuItem Label="Headers and footers" />
    </MudMenu>
</MudMenu>

Advanced Usage

Two-way Binding

The Open parameter supports two-way binding, allowing you to control the menu's visibility programmatically and synchronize its state with a boolean property.

Open Menu Switch

<MudMenu Label="Open Menu" @bind-Open="_open">
    <MudMenuItem Label="Item 1" />
    <MudMenuItem Label="Item 2" />
    <MudMenuItem Label="Item 3" />
</MudMenu>

<MudButton Color="Color.Primary" OnClick="OnOpen">Open for 1 Second</MudButton>
<MudSwitch Color="Color.Primary" @bind-Value="_open" Label="Open Menu Switch" />

@code {
    private bool _open;

    private async Task OnOpen()
    {
        _open = true;
        await Task.Delay(1000);
        _open = false;
    }
}

Mouse Events

Use the ActivationEvent property to specify which mouse event opens the menu. If the menu is a nested menu, this property may act differently.

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 Label="Profile" />
        <MudMenuItem Label="Theme" />
        <MudMenuItem Label="Usage" />
        <MudMenuItem Label="Sign Out" />
    </ChildContent>
</MudMenu>

<MudMenu ActivationEvent="@MouseEvent.RightClick">
    <ActivatorContent>
        <MudChip T="string" Icon="@Icons.Material.Filled.Mouse" Color="Color.Primary">Right Click</MudChip>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem Label="Profile" />
        <MudMenuItem Label="Theme" />
        <MudMenuItem Label="Usage" />
        <MudMenuItem Label="Sign Out" />
    </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 Label="Profile" />
        <MudMenuItem Label="Theme" />
        <MudMenuItem Label="Usage" />
        <MudMenuItem Label="Sign Out" />
    </ChildContent>
</MudMenu>

Cursor Position

Enable the PositionAtCursor property to open the menu at the cursor's location.

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 Label="Undo" />
        <MudMenuItem Label="Redo" Disabled />
        <MudDivider />
        <MudMenuItem Label="Cut" />
        <MudMenuItem Label="Copy" />
        <MudMenuItem Label="Paste" />
    </ChildContent>
</MudMenu>

Context Menu

The previous example can be extended to create a contextual menu. 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 PositionAtCursor @ref="_contextMenu">
    <MudMenuItem Label="Undo" />
    <MudMenuItem Label="Redo" Disabled />
    <MudDivider />
    <MudMenuItem Label="Cut" />
    <MudMenuItem Label="Copy" />
    <MudMenuItem Label="Paste" />
</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. Adjust the AnchorOrigin and TransformOrigin properties to control the menu's position. For more details and examples, visit the popover documentation page.

Anchor Origin

Top-Left

Top-Center

Top-Right

Center-Left

Center-Center

Center-Right

Bottom-Left

Bottom-Center

Bottom-Right

Transform Origin

Top-Left

Top-Center

Top-Right

Center-Left

Center-Center

Center-Right

Bottom-Left

Bottom-Center

Bottom-Right

<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 Label="Enlist" />
                <MudMenuItem Label="Barracks" />
                <MudMenuItem Label="Armory" />
            </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}";
    }
    
}

DropdownSettings

This component uses MudPopover to place its list of items in combination with MudOverlay. Some of these settings can be controlled with DropdownSettings, which contain defaults for the MudPopover appearance and behavior. Read more on popover's page.

List

Message Box