Skip to main content

Overlays and menus

CommandMenu

A dialog-backed command palette with grouped commands, local filtering, keyboard movement, and custom select events.

Curated demo

Commands

Docs

Reference

A dialog-backed command palette with grouped commands, local filtering, keyboard movement, and custom select events.

  • Use CommandMenu for local command palettes, not for remote search infrastructure.
  • The component emits snurble-command-select with the chosen value.
  • Because it is dialog-backed, open it from a user gesture in production interactions.

Props

Name Type Default Description
id string — Dialog id.
open boolean false Open on initial load.
title string 'Command menu' Dialog title.
placeholder string 'Type a command…' Search input placeholder.
groups CommandMenuGroup[] — Grouped command items.
emptyText string 'No commands found.' Empty state text.
class string — Additional CSS classes.

Example snippet

<CommandMenu open title="Commands" groups={[{ label: "Docs", items: [{ label: "Open components", value: "components" }] }]} />