pattern playground

Command menu

Added

The invocation of commands by name, navigating the tension between discoverability and speed.

Global

Pop up in the middle of the screen…

Local

The move recurs wherever a capability has a command space of its own. For instance choosing a block in a block-based editor TODO: Add demo.

  • Command menu — the mechanism: the combobox composition with hierarchical drill-in and AI fallback
  • Combobox — the mechanism this pattern builds on; src/components/combobox/ drives the text input, filtered list, and keyboard model
  • Keyboard key
  • Context menu — pointer-driven and target-aware; command menu is keyboard-driven and name-based
  • Toolbar — exposes a persistent subset of commands; the command menu offers the full set on demand

To-do

Related patterns to capture: search (including local search), bookmarks, recent stuff, …

Consequences

  • commands are reachable by name, which lifts the obligation on the chrome to display everything the surface can do; discovery moves from scanning to typing a guess
  • the menu shows only what applies here, so commands that don't apply are absent rather than visibly out of reach — which is a kindness for the irrelevant ones and a mystery for the ones the actor expected to find
  • naming needs the name: the move is fast for actors who already have the vocabulary and no help at all to actors who came looking for it

Related patterns

Precedes

  • Unavailable actions — the menu shows only what applies here, so commands that don't apply are absent rather than visibly out of reach — which is a kindness for the irrelevant ones and a mystery for the ones the actor expected to find

Enables

Instantiates

  • Searching — searching is the broader seeking move, applied to a command vocabulary

Complements

  • Autocomplete — supports command menu functionality by reducing typing effort and increasing discoverability of commands.
  • Collaboration — Command menus provide quick access to collaborative actions and workflows
  • Embedded intelligence — helps the actor find relevant commands when exact matches aren't available
  • Keyboard shortcuts — surfaces shortcuts alongside each command name, making the invisible visible — the command menu is often the primary discovery mechanism for a shortcut system
  • Fully connected — keyboard-driven alternative for power users
  • Hub and spoke — provides escape hatch for quick navigation without hub return
  • Mastery — key enabler of mastery, accessible to intermediates
  • Multilevel tree — quick access bypassing hierarchy
  • Workspace — provides rapid access to workspaces and contexts without navigating the interface hierarchy

Tangentially related

  • Modality — overlay invocation that intersects modality without being defined by it

Related