use UI

Command Palette

Also called ⌘K menu, spotlight, quick switcher, command bar, command menu

A searchable overlay, usually opened with a keyboard shortcut, listing actions and destinations that filter as the user types.

Example

In a real product this opens with ⌘K — and the shortcut is shown somewhere permanent, because a palette nobody can find does not exist.

When to use it

  • The product has more actions than any menu can hold comfortably — dozens of commands, hundreds of documents.
  • People use it daily. The shortcut only pays off once it is in muscle memory.
  • Navigation and actions live in different places, and jumping between them by pointer is slow.
  • You want one predictable entry point for search, navigation and commands at once.

When not to

  • It is the only way to reach something. Every command in the palette needs a visible home too, or the feature does not exist for most users.
  • The app has a handful of actions. A palette over five commands is ceremony.
  • The audience is occasional or first-time users, who will never discover a shortcut nobody told them about.
  • You are tempted to put a destructive action in it. Fuzzy matching plus a fast Enter is a bad combination for anything irreversible.

Trade-offs

  • Fastest possible path for someone who knows what they want.
  • Costs no permanent screen space.
  • Doubles as a discovery tool — typing a vague word reveals commands the user did not know existed.
  • Undiscoverable by nature; it needs a visible hint somewhere to exist at all.
  • Useless to pointer-only and touch users unless you also expose a button.
  • Needs constant upkeep — a palette missing half the app's commands is worse than none, because it teaches people not to trust it.

Accessibility

What this pattern needs in order to work for everyone.

Keyboard
  • The shortcut must not collide with browser or assistive-tech bindings. ⌘K and Ctrl+K are conventional for a reason.
  • Arrow keys move through results, Enter runs the highlighted one, Escape closes and returns focus to where it was.
  • Focus goes to the input on open — the user is expected to type immediately.
Roles and state
  • It is a combobox pattern: the input owns `role="combobox"`, the results are a `listbox`, and each result is an `option`.
  • Use `aria-activedescendant` so the highlighted item is announced while focus stays in the input.
  • Announce the result count as it changes, or a screen reader user cannot tell whether typing narrowed anything.
Focus
Focus stays in the input the entire time — arrow keys move a visual highlight, not focus itself. That is what allows typing and navigating at once, and it is the part most hand-rolled implementations get wrong.

In the wild

  • Linear Arguably the product that made the pattern an expectation; nearly every action is reachable from it.
  • VS Code The command palette predates the current trend and still sets the bar for breadth.

Compared with

Side-by-side breakdowns of patterns that solve a similar problem.