Playground
  • Introduction
  • Components

Command menu

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.

Related components

  • 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, …

Related patterns

Precedes

  • Unavailable actions — context menus show only relevant commands, hiding those inaccessible in the current context

Enables

  • Block-based editor — picking a block and placing it; summoned at the current position

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

  • Flat navigation — efficient tool access
  • Help
  • Undo — can be used to access undo options