Examples
Click the trigger to open. Arrow keys navigate items, Escape closes, Enter activates. Click outside to dismiss.
Actions menu
Settings menu
Item types
itemStandard action. Accepts label, optional icon, optional keyboard shortcut, and onClick handler.item (destructive)Red label and icon. Use for irreversible actions: delete, deactivate, revoke.item (disabled)Greyed out, aria-disabled="true". Remains in the tab order but does not respond to click.dividerHorizontal rule separating groups of related actions. role="separator".labelNon-interactive section heading. Uppercase, subdued. Not a menu item — aria-hidden.Keyboard & accessibility
Enter / SpaceOpen the menu from the trigger.↑ / ↓Move focus between enabled menu items.Home / EndJump to first / last enabled item.EnterActivate the focused menu item.EscapeClose the menu and return focus to the trigger.Click outsideClose the menu.role="menu"Applied to the panel. Each item has role="menuitem".aria-haspopup"menu" on the trigger. aria-expanded reflects open/closed state.Placement
bottom-end (default)Panel aligns to the right edge of the trigger. Use for row action menus (⋯ button at end of a table row).bottom-startPanel aligns to the left edge of the trigger. Use when the trigger is on the left side of the layout.Usage guidance
DoGroup related actions with dividers. Keep each group to 3–5 items.DoPut destructive actions last, separated by a divider.DoUse an icon-only ⋯ trigger for table row actions to avoid clutter.Don'tPut more than 8–10 items in a single menu — consider a dedicated settings page.Don'tUse a menu for navigation between pages — use a nav or link list instead.Don'tRemove disabled items entirely; keep them visible so users understand what's available in different contexts.Tokens used
bg/basePanel backgroundborder/subtlePanel border and divider colorborder-width/basePanel border weight (1px)bg/faintItem hover and focus backgroundtext/baseStandard item labeltext/subtleItem icon color, section label, keyboard shortcuttext/disabledDisabled item text and iconstatus/errorDestructive item label and iconradius/lgPanel corner radius (12px)radius/smItem hover border radius (4px)space/1Panel padding and item gap from edges (4px)space/3Item horizontal padding (12px)space/2Gap between icon and label (8px)body/smItem font sizefont/monoKeyboard shortcut typeface