Components / Actions
Menu
A menu shows a temporary list of actions or destinations from a button, an icon or any custom activator. Choose a menu when several related actions would crowd the screen; keep the most frequent action visible as a button.
MudMenuMudMenuItem- MudBlazor reference ↗
- Page source ↗
Button and icon menus
Label renders a button that takes Variant, Color, StartIcon and EndIcon. Icon renders an icon button instead, which needs AriaLabel.
Open a menu and choose an item.
Items: icons, dividers, links and disabled entries
Items take an Icon and IconColor, can navigate with Href, and can be disabled. Dense tightens the list for long or frequent menus.
Nothing chosen yet.
“Paste” is disabled because the clipboard is empty.Custom activators and activation events
ActivatorContent replaces the default button and receives a context with ToggleAsync. Keep the activator a real button so it works from the keyboard.
The avatar and the chip are buttons, so Tab and Enter open them too.
Nested menus
A MudMenu inside a menu becomes a submenu that opens on hover or with the arrow keys. Keep nesting shallow: two levels is usually the limit.
Hover or use the arrow keys to open a submenu.
Positioning recipes
AnchorOrigin picks the point on the activator; TransformOrigin picks the point of the menu that is pinned to it. These pairs cover most layouts.
BottomLeft · Transform TopLeftBottomCenter · Transform TopCenterBottomRight · Transform TopRightTopLeft · Transform BottomLeftTopRight · Transform TopLeftTopLeft · Transform TopLeftScenario: row actions and a context menu
Every row has a visible actions button. Right-clicking a row opens the same actions at the cursor as a shortcut, with an empty activator so no blank control is added.
M31, Andromeda galaxy
12 × 300 s · 14 SepM42, Orion nebula
40 × 60 s · 2 OctNGC 7000, North America nebula
18 × 240 s · 5 OctUse the ⋮ button on a row, or right-click the row.
Controlled open state and long lists
Bind Open to show or hide a menu from code, and set MaxHeight so a long list scrolls instead of running off screen.
Bound open state
MaxHeight on a long list
Departing from platform 7.
Playground
Change any parameter, including both origins; the markup below shows only the values that differ from the defaults.
Last shelf chosen: none
<MudMenu
Label="Reading list"
AnchorOrigin="Origin.BottomLeft"
Variant="Variant.Outlined"
Color="Color.Primary"
EndIcon="@Icons.Material.Outlined.ArrowDropDown">
<MudMenuItem Label="Want to read" />
<MudMenuItem Label="Reading now" />
<MudMenuItem Label="Finished" />
</MudMenu>