Component reference
Menu
Material 3 Expressive Menu component for displaying a list of choices on a temporary surface.
Material 3Web ComponentFramework agnostic
Standalone Menu
Use menus for contextual actions, overflow options, and lightweight selections.
Anchored Example
M3 menu surface<div class="menu-anchor">
<m3-button variant="filled">Open menu</m3-button>
<m3-menu open placement="bottom-start">
<m3-menu-item value="profile">
<span slot="leading-icon" class="material-symbols-outlined">person</span>
Profile
</m3-menu-item>
<m3-menu-item value="share">
<span slot="leading-icon" class="material-symbols-outlined">share</span>
Share
</m3-menu-item>
</m3-menu>
</div>Positioning API
Use placement to choose where the menu opens relative to its anchor, and offset to control the gap in pixels.
Placement Options
Built intom3-menuBottom
bottom-startbottom-centerbottom-endTop
top-starttop-centertop-endRight
right-startright-centerright-endLeft
left-startleft-centerleft-end Example: placement="right-center" offset="12"
<m3-menu placement="right-center" offset="12" open>
<m3-menu-item value="profile">Profile</m3-menu-item>
<m3-menu-item value="share">Share</m3-menu-item>
</m3-menu>♿ Accessibility
- Role Mapping: The surface uses
role="menu"and items userole="menuitem". - Keyboard Navigation: Arrow keys, Home, End, Escape, and Tab dismissal are supported.
- Dismissal: Menus close on outside click, Escape, Tab, or item selection.