UX Patterns Guide
UI + UX Navigation And Wayfinding established

Command palette

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

Open in lab Compare alternatives
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

Experienced users need a fast keyboard-first way to jump to actions, destinations, and objects across a large product.

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.

Recovery path

No mouse-accessible trigger.

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.
  • Rows distinguish navigation, creation, settings, and confirmation-required actions without relying on icons alone.
  • 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.
  • Commands with identical labels, no scope, no active row, and no indication whether Enter navigates or changes data.
  • Palette is the only way to reach important navigation.
  • Destructive commands execute from fuzzy search with no confirmation or recovery.
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.
  • 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.

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.
  • A visible trigger and optional shortcut may open the palette.

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?
Interactive lab

Inspect the states before you copy the pattern

Run a global command

Open the palette, filter commands, and inspect whether actions remain discoverable.

Command palette
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

Closed state with discoverable trigger.

Keyboard / Access

A visible trigger and optional shortcut may open the palette.

Avoid Generating

Hiding basic navigation behind a keyboard-only palette.
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

Last verified: