Back to docs
Recipe

Quick actions menu

Build a floating command palette that lets users jump to any page or trigger actions with a single keystroke.

Cmd+K or Ctrl+K to open

Press the shortcut anywhere in the app to bring up the quick actions overlay. Start typing to filter available commands — navigation links, theme toggles, and custom handlers all appear inline.

Ingredients

  • A global keyboard listener that captures the trigger chord
  • A filtered list component with fuzzy-search matching
  • A portal-rendered overlay with backdrop blur
  • Keyboard navigation — arrow keys, Enter to select, Escape to dismiss

Steps

  1. 1Create a state slice that holds isOpen and query.
  2. 2Register a keydown listener on window that toggles the overlay.
  3. 3Render the overlay inside a portal. Use a backdrop with backdrop-blur-md and a centered search input.
  4. 4Filter your action list against query. Highlight the active index and wire Enter to fire the selected action.

Pro tip

Preload the action list from a static registry so the palette opens instantly — no network round-trip on first press. Group actions into sections (Navigation, Settings, Tools) with subtle dividers for scanability.