Use an action menu for a contextual list of commands on one resource or selection, a menu button for the trigger and popup mechanics, a button group for a few visible peer commands, and a command palette for broad searchable command discovery.
Use an action menu for a contextual list of commands on one resource or selection, a menu button for the trigger and popup mechanics, a button group for a few visible peer commands, and a command palette for broad searchable command discovery.
Practice the judgment: Imagine this situation: The menu mixes commands, filters, navigation links, settings toggles, and editable fields in one list. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Action menu | Menu button | Button group | Command palette |
|---|---|---|---|---|
| UI or UX | UI + UX - Contextual command list for a resource or selection | UI + UX - Button-controlled popup menu of actions or links | UI + UX - Grouped visible action buttons | UI + UX - Modal command surface |
| UI guidance | Render a compact menu of verb-led actions scoped to one resource, row, card, selected set, or page object, with clear section headings, object-aware labels, disabled reasons, and separated dangerous commands. | Render a named button trigger, visible opened state, controlled popup, menu items, active item styling, disabled item state, separator or section grouping, and a safe way to distinguish destructive commands. | Render a small group of visibly related action buttons with one clear scope, one dominant primary action when needed, lower-emphasis alternatives, consistent labels, visible focus, and stable spacing. | Render a compact dialog-like command surface with a search input, current scope, typed command mode, active result, command metadata, and empty state. |
| UX guidance | Make the current object or selection count explicit, update actions when scope changes, and route destructive or privacy-sensitive commands into confirmation, undo, restore, or review instead of running silently. | Make dismissal, activation, focus return, unavailable actions, and high-risk command handoff predictable so the menu behaves like a command chooser rather than a hidden form. | Use a button group when users need to choose between a few related commands at the same workflow moment, such as saving, continuing, going back, cancelling, applying, resetting, or exporting in one local task. | Accelerate expert navigation and repeated actions across a large product while preserving ordinary navigation for novice and low-frequency users. |
| Good UI | A Customer actions menu has Manage customer, Data requests, and Account risk sections, with Edit customer, Merge customer, Request data export, and Delete customer separated at the end. | A table row has a Report actions button that opens a compact menu with Open, Rename, Duplicate, Archive, and an unavailable Export item. | A form footer shows Save draft, Continue, and Cancel as one named action group, with Continue primary only after required work is saved. | Centered command surface with input, shortcut hint, scope chip, grouped commands, command type labels, and a visible active row. |
| Bad UI | Safe, risky, disabled, external, and value-selection items share the same style and role. | A primary Save action is hidden behind More while lower-priority icons remain visible. | A footer contains Save, Continue, Delete, Help, View report, and Open settings as identical primary buttons. | Huge branded modal that buries the input below decorative content. |
| Good UX | A user opens Customer actions, chooses Duplicate customer, and receives status that names the customer and keeps focus anchored to the action context. | A user opens Report actions, arrows to Duplicate report, activates it, and focus returns to the Report actions trigger with a status update. | A user chooses Reset changes from a separated danger action and receives a clear reset result instead of accidentally resetting beside Continue. | Keyboard shortcut or visible trigger opens the palette, focus lands in the command input, arrows move the active row, and Enter activates the highlighted safe command. |
| Bad UX | A user activates a menu item that looks like a command but navigates away and loses unsaved context. | A user tabs into a menu and lands in a text input because the menu contains unrelated form controls. | Users hesitate because Save, Submit, Continue, and Next are all high-emphasis buttons in the same group. | Palette is the only way to reach important navigation. |
| Best fit | A resource, row, card, selected set, or local page object has several contextual commands. | A local object or toolbar has three to eight secondary commands. | A form, dialog, panel, card, or workflow footer needs two to four related visible commands. | Users need to traverse a broad product surface quickly. |
| Avoid when | Only one or two commands are needed and visible buttons would be faster. | The job is choosing a form value, selecting several values, or browsing a long list. | The controls are mutually exclusive view modes that need a selected state. | The app has only a few obvious actions. |
| Required state | Closed trigger or contextual entry point with resource scope. | Closed trigger state with visible or accessible name. | Default group with a clear label or surrounding context. | Closed state with discoverable trigger. |
| Accessibility burden | Give the trigger or menu an accessible name that includes the resource or selected-set scope. | Use an actual button for the trigger when possible. | Use native button elements for actions so Enter and Space activation, disabled behavior, and focus work predictably. | Use dialog semantics with a clear name and modal behavior when the rest of the page is inert. |
| Common misuse | Letting a bulk action menu run single-object commands against multiple selected items. | Using a menu button for long value selection that should be a select, listbox, combobox, or multi-select. | Putting unrelated actions into one row because the layout has space. | Hiding basic navigation behind a keyboard-only palette. |