CommandMenu

Usage

CommandMenu is a controlled component — pair open with a piece of local state and wire onOpenChange so Escape and the backdrop dismiss it. Keyboard navigation (arrows, Enter, Escape) and focus management are built in.

import { CommandMenu, Button } from '@epasslive/design-system'

const [open, setOpen] = useState(false)

<Button variant="primary" onClick={() => setOpen(true)}>Open</Button>
<CommandMenu
  open={open}
  onOpenChange={setOpen}
  groups={[
    {
      id: 'navigation',
      label: 'Navigation',
      items: [{ id: 'home', label: 'Go to home', onSelect: () => setOpen(false) }],
    },
  ]}
/>

i18n and focus hooks

Localize the palette chrome with labels and the filter input with inputAriaLabel / inputPlaceholder. Use onFocusTrap / onRestoreFocus to save and restore the trigger element’s focus across the open/close cycle (e.g. when opening from a global ⌘K shortcut with no trigger button).

const triggerRef = useRef<HTMLButtonElement | null>(null)

<CommandMenu
  open={open}
  onOpenChange={setOpen}
  onFocusTrap={() => { triggerRef.current = document.activeElement as HTMLButtonElement | null }}
  onRestoreFocus={() => { triggerRef.current?.focus() }}
  labels={{ openMenu: 'Menu de commandes', noResults: 'Aucun résultat' }}
  inputAriaLabel="Rechercher une commande"
  inputPlaceholder="Tapez une commande…"
  groups={groups}
/>

When to use CommandMenu vs SearchSelect vs Menu

Use CommandMenu for global, power-user actions — a ⌘K-style palette aggregating navigation shortcuts and commands across the whole app, opened from anywhere. Use SearchSelect when the user must pick one option within a form from a searchable list (its value feeds form state). Use Menu for short, contextual action lists anchored to a trigger in the page. Rule of thumb: form field → SearchSelect; anchored context actions → Menu; global palette → CommandMenu.

Props