<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.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" 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 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>
<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>
<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.
<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 FullWidth="true" Disabled="true"> <ActivatorContent> <MudChip 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 Image="images/toiletvisit.jpg" /> </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>
Mouse Events
With the property ActivationEvent
, the menu can be opened on different mouse events.
<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" AnchorOrigin="Origin.BottomCenter" TransformOrigin="Origin.TopCenter"> <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>
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>
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="" 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="" 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 @bind-SelectedOption="" 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.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}"; } }
Click and Touch Events
On mobile devices the default OnClick
handler will not be invoked. You must add a OnTouch
handler as well if mobile support is desired.
@inject ISnackbar Snackbar <MudMenu Label="Open Menu" Variant="Variant.Filled" Color="Color.Primary"> <MudMenuItem OnClick="OnClick">OnClick Only</MudMenuItem> <MudMenuItem OnTouch="OnTouch">OnTouch Only</MudMenuItem> <MudMenuItem OnClick="OnClick" OnTouch="OnTouch">Both OnClick and OnTouch</MudMenuItem> </MudMenu>
@code { private void OnClick(MouseEventArgs args) => Snackbar.Add("OnClick Invoked"); private void OnTouch(TouchEventArgs args) => Snackbar.Add("OnTouch Invoked"); }
<MudMenu Label="Open Menu" Variant="Variant.Filled" Color="Color.Primary" AnchorOrigin="Origin.CenterCenter" TransformOrigin="Origin.TopLeft" Dense> <MudMenuItem> <MudMenu ActivationEvent="MouseEvent.MouseOver" AnchorOrigin="Origin.TopRight" TransformOrigin="Origin.TopLeft" Dense> <ActivatorContent> <MudMenuItem> Item 1 </MudMenuItem> </ActivatorContent> <ChildContent> <MudMenuItem> Item 1.1 </MudMenuItem> <MudMenuItem> Item 1.2 </MudMenuItem> </ChildContent> </MudMenu> </MudMenuItem> <MudMenuItem> <MudMenu ActivationEvent="MouseEvent.MouseOver" AnchorOrigin="Origin.TopRight" TransformOrigin="Origin.TopLeft" Dense> <ActivatorContent> <MudMenuItem>Item 2</MudMenuItem> </ActivatorContent> <ChildContent> <MudMenuItem> Item 2.1 </MudMenuItem> <MudMenuItem> Item 2.2 </MudMenuItem> </ChildContent> </MudMenu> </MudMenuItem> </MudMenu>