Component

Command menu

Searchable action and navigation listbox with grouped items, keyboard navigation, shortcuts, loading, and empty states.

Command menu is the shared substrate for palettes, / commands, @ suggestions, quick switchers, and model/action pickers.
navigation
DOM renderImage render
Command menuDefault
Commands
↑↓navigate↵open

Playground

Controls update query params directly. Complex slots use item-owned examples so component states stay deterministic, linkable, and screenshot-ready.

Loading playground

Rendered matrix

Every state maps to the same component render route through the state query param.

Default

Palette with search, grouped results, active row, shortcuts, and footer hints.
Commands
↑↓navigate↵open
Render state

Empty

No-result state with the same shell and keyboard contract.
No matches
Commands
↑↓navigate↵open
Render state

Loading

Pending remote results without changing layout.
Searching
Commands
↑↓navigate↵open
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
items *readonly CommandMenuItem[]-Grouped command items with labels, metadata, shortcuts, and disabled state.
querystring-Controlled search query.
defaultActiveIdstring-Initial active item id for uncontrolled navigation.
activeIdstring-Controlled active item id.
searchablebooleantrueRenders the search input header.
loadingbooleanfalseShows a pending remote results row.
onSelect(item: CommandMenuItem) => void-Called when Enter, Tab, or click selects an enabled item.
onEscape() => void-Called when Escape closes the menu.