Menus

Menus (COMPONENT_SPEC §21, Compose DropdownMenuPopup + DropdownMenuGroup and the baseline DropdownMenu). The expressive vertical menu comes in standard and vibrant colors; groups separated by gaps make it segmented. Items can be actions, checkable (menuitemcheckbox) or selectable (menuitemradio). The <m3e-menu> element (m3e-elements) and <Menu> (m3e-react) add positioning (Compose's DropdownMenuPositionProvider: below the trigger, flipped above when there is no room), the open scale + fade on the fast spatial / fast effects springs, light dismiss, the APG menu keyboard model, typeahead and submenus.

Variants (static, CSS only)

Without popover the m3e-css contract renders inline.

Custom element

An <m3e-menu anchor="…"> with <m3e-menu-item> and <m3e-menu-group> children. Events: action on the item, with a detail of { value, checked }, and open-change on the menu.

CutCopyPasteAlignShareLeftCenterRightBoldItalicUnderlineLeftCenterMailShareDeleteEditSettingsSend feedback

Last action: none

تعديلمشاركة

React

A <MenuTrigger> around a button and a <Menu> of <MenuItem> / <MenuSection> elements. The selectionMode prop makes items checkable (multiple) or selectable (single), and <MenuItem submenu={<Menu>…</Menu>}> nests a menu.

CSS only

A popover with popovertarget opens without JavaScript, positioned by CSS anchor positioning where supported and animated on the springs' linear() curves. It has no menu keyboard model: use the element or React layer for that.