<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>
<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.
<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>
<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>
<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.
<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.
<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>
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="" Color="Color.Primary" Icon="@GetIcon()" Overlap="true" Elevation="4"> <MudMenu Label="Advanced Placement" Variant="Variant.Filled" AnchorOrigin="" 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}"; } }