UX Patterns Guide

Application · lesson 18 of 21 · Navigation And Wayfinding

Command palette

Underlying principle: Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

Open a searchable modal command surface that lists actions and destinations, supports filtering, and clearly previews what each command does.

Start with the decision

Does this fit your task?

Users need to traverse a broad product surface quickly.

Review the boundary: Compare the task with the alternatives in the decision section.

Review the decision →
Try the live example →Compare alternatives →
Study the interaction

Follow the task before choosing the component

Navigation exposes the site's structure at the moment a person needs to move. A useful route has a recognizable label, a predictable destination, and an orientation cue after arrival.

01 / Recognize the need

What the person is doing

The product has many actions spread across menus and pages.

02 / Design the response

What the interface must communicate

Open a searchable modal command surface that lists actions and destinations, supports filtering, and clearly previews what each command does.

Closed state with discoverable trigger.

03 / Judge the outcome

What to look for

Is this an accelerator for known workflows or a crutch for weak navigation?

Opening the palette moves focus to the command input.

Practice this pattern: Sketch command palette for this situation: Users need to traverse a broad product surface quickly. Include this state: Closed state with discoverable trigger. Review your sketch with this question: Is this an accelerator for known workflows or a crutch for weak navigation?

Study the Navigation And Wayfinding family →Read the underlying principle →
Decision first

Choose this pattern when the problem matches

Use when

  • Users need to traverse a broad product surface quickly.
  • Commands can be named and filtered predictably.

Avoid when

  • The app has only a few obvious actions.
  • Users are mainly first-time or low-frequency visitors.
  • The command set contains mostly high-risk actions that need deliberate review.

Problem it prevents

The product has many actions spread across menus and pages.

Test the behavior

Try strong and weak versions of the interaction

Open the working example, try its controls, and compare the behavior against the decision guidance.

In the lab you can
  • switch between strong UI, weak UI, strong UX, and weak UX;
  • trigger required, empty, loading, error, and recovery states;
  • inspect keyboard and accessibility expectations beside the demo.
Launch Command palette in the lab
Pattern anatomy

What a strong implementation has to make clear

User need

The product has many actions spread across menus and pages.

Pattern promise

Open a searchable modal command surface that lists actions and destinations, supports filtering, and clearly previews what each command does.

Required state

Closed state with discoverable trigger.

Failure to inspect

Focus lost behind the overlay.

Access contract

Use dialog semantics with a clear name and modal behavior when the rest of the page is inert.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Centered command surface with input, shortcut hint, scope chip, grouped commands, command type labels, and a visible active row.
  • 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.
  • Escape closes and returns focus to the opener; destructive commands open a confirmation-required state.
Weak implementation

Vague, hidden, hard to recover from

  • Huge branded modal that buries the input below decorative content.
  • Palette is the only way to reach important navigation.
  • Focus lost behind the overlay.
UI guidance
  • Render a compact dialog-like command surface with a search input, current scope, typed command mode, active result, command metadata, and empty state.
  • Make the visible trigger, shortcut hint, focused input, highlighted row, command type, and destructive confirmation requirement easy to scan.
UX guidance
  • Accelerate expert navigation and repeated actions across a large product while preserving ordinary navigation for novice and low-frequency users.
  • Make command execution predictable by showing scope, consequence, keyboard behavior, dismissal, and recovery before activation.
Implementation contract

What the implementation must handle

States

  • Closed state with discoverable trigger.
  • Open dialog state with focus in the command input.
  • Scoped suggested commands state.
  • Filtered result state with one active command.

Interaction

  • Opening the palette moves focus to the command input.
  • Enter activates the active command or opens a required confirmation flow.
  • Escape closes and returns focus to the opener.
  • Activating a command performs the labeled action or navigates to the labeled destination.

Accessibility

  • Use dialog semantics with a clear name and modal behavior when the rest of the page is inert.
  • Expose the result list and active option to assistive technology.
  • A visible trigger and optional shortcut may open the palette.
  • Arrow keys move through results.

Review

  • Is this an accelerator for known workflows or a crutch for weak navigation?
  • Can users tell whether the highlighted row navigates, changes state, or opens a confirmation?
Evidence trail

Source-backed claims behind this guidance

GitHub Command Palette

GitHub Docs - checked

GitHub documents keyboard opening, scoped suggestions, command mode, arrow-key highlighting, Enter activation, and Escape dismissal.

Visual Studio Code Command Palette

Microsoft Visual Studio Code - checked

VS Code documents a keyboard-first command palette for commands, files, symbols, and command discovery in one interactive window.

WAI-ARIA Authoring Practices Guide

W3C Web Accessibility Initiative - checked

APG dialog and listbox patterns define focus, Escape, active option, and semantic requirements used by accessible palette implementations.

Full agent/debug reference

Problem Context

  • The product has many actions spread across menus and pages.
  • Users repeat expert workflows and benefit from keyboard acceleration.
  • Commands may depend on the current workspace, repository, object, or page scope.

Selection Rules

  • Choose a command palette when users need to run commands or jump across destinations faster than the visible navigation allows.
  • Use it as an accelerator layered on top of visible navigation, never as the only path to primary workflows.
  • Label commands by outcome and scope, such as Open billing or Create report in Workspace, rather than internal feature names.
  • Require an additional confirmation or separate flow before irreversible, destructive, or permission-changing commands execute.

Required States

  • Closed state with discoverable trigger.
  • Open dialog state with focus in the command input.
  • Scoped suggested commands state.
  • Filtered result state with one active command.
  • No matching commands state with query revision.
  • Command executed, confirmation-required, or dismissed state.

Interaction Contract

  • Opening the palette moves focus to the command input.
  • Arrow keys move the active command without changing the query.
  • Enter activates the active command or opens a required confirmation flow.
  • Escape closes and returns focus to the opener.
  • Activating a command performs the labeled action or navigates to the labeled destination.
  • The visible scope explains what object, workspace, or page the command will affect.

Implementation Checklist

  • Provide a visible trigger and a keyboard shortcut hint where appropriate.
  • Use dialog semantics for the overlay and listbox or equivalent composite semantics for command results.
  • Keep focus inside the palette while open and return focus to the opener after close.
  • Show current scope, command type, active row, empty state, and execution feedback.
  • Keep destructive commands out of one-keystroke execution unless they open a confirmation step.

Common Generated-UI Mistakes

  • Hiding basic navigation behind a keyboard-only palette.
  • Mixing irreversible destructive actions into the same low-friction list.
  • Returning vague commands such as Settings without context.
  • Treating content search results and side-effect commands as the same kind of row.

Critique Questions

  • Is this an accelerator for known workflows or a crutch for weak navigation?
  • Can users tell whether the highlighted row navigates, changes state, or opens a confirmation?
Accessibility
  • Use dialog semantics with a clear name and modal behavior when the rest of the page is inert.
  • Expose the result list and active option to assistive technology.
  • Do not rely on a keyboard shortcut as the only way to open the palette.
Keyboard Behavior
  • A visible trigger and optional shortcut may open the palette.
  • Arrow keys move through results.
  • Enter activates the highlighted command.
  • Escape closes the palette and restores focus.
  • Tab movement stays within the palette while it is open.
Variants
  • Global command palette
  • Quick switcher
  • Contextual command menu

Verification

Source trail checked:

Saved items