Command Menu

Open it, type to filter, and move with ↑ ↓ over one gliding highlight. You own the data and the actions: pass groups of items and handle onSelect. The menu opens in a layer above the page and follows the theme of the area it is in.

Opening it

It listens for ⌘K (Ctrl K) wherever it is mounted. The CommandMenuTrigger pill is the button that opens it from a top bar or sidebar. Mount one menu per page: two with the same hotkey would open together.

// ⌘K (Ctrl K) opens it by default, wherever the menu is mounted.
<CommandMenu defaultOpen={false} groups={groups} />

// Own the key, or turn it off:
<CommandMenu hotkey="j" groups={groups} />       // ⌘J
<CommandMenu hotkey={false} open={open} onOpenChange={setOpen} groups={groups} />

Simple

variant="simple" drops the scopes and the workspace footer: the field, one group and the key hints.

Scopes and filter tokens

scopes are the tabs under the field; an item belongs to the scope of its type unless it names its own. Filters are tokens in the field. They keep the items whose tags contain the token's value, and typing team:Design and a space makes one for any key in filterKeys.

Preview pane

renderPreview adds a detail pane for the active row; return null for rows with nothing to show and previewEmpty fills the gap. previewActions stay pinned at the bottom while the content above cross-fades from row to row.

Ask AI

The answer slot takes a Chain of Thought and a CommandMenuAnswer. It behaves the way a chat reply does: with an empty field there is no answer, only suggested questions. Pick one, or type your own and press ↵(⌘↵ works from any scope), and it thinks, folds the thinking shut, and writes the answer in. Change the question and the answer goes, because it belongs to the question in the box. The menu displays; your agent supplies the steps and the text (this demo is scripted, and answers questions about dark mode and themes).

Answer card

CommandMenuAnswer can be used on its own. With stream it writes a plain-string answer in word by word and calls onStreamEnd when it is done; the sources and the follow-up arrive after the text. A soft light travels around the card's border until the whole response is there.

Loading, error and no results

A search never ends in a dead end. An empty result can offer a fix (suggestions) and a way on (fallbackGroups, navigable like any group); an error has a retry and a quieter report, and can still show what to open instead.

Results from a server

By default the menu filters the groups you pass. When your server does the searching, set filter={false} so it shows exactly what you give it, and drive state from the request. This demo waits 450ms before it answers.

Trigger

The pill for a top bar or sidebar. It only opens the menu: give it onClick.

Keyboard

Dark mode and glass

The menu reads the semantic and Surface tokens, so it follows light and dark by itself. It is drawn in a layer above the page, and takes the theme of the nearest .dark area it is mounted in. Inside a data-surface="glass" area the panel, rows and footer take the glass tokens. The Ask AI mark is the SakaniUI arc in the text colour, so it is white in dark mode.

Motion

Accessibility

• It is a modal dialog with an accessible name (aria-label); focus moves to the field when it opens and goes back to what opened it when it closes.
• The field is a combobox over a listbox; the highlighted row is announced through aria-activedescendant, so focus never leaves the field.
• Scopes are a tab list. Loading, no-results and error messages are announced, and the answer card is marked busy while it is being written.
• Every action has a key: ↑ ↓, ↵, ⌘↵, Tab, esc. Nothing needs a pointer.
• Reduced motion makes the panel, the highlight, the thinking and the streamed answer instant, and the light does not run.

CommandMenu props

CommandMenuItem

CommandMenuGroup

CommandMenuScope

CommandMenuFilter

CommandMenuSuggestion

CommandMenuTrigger props

CommandMenuAnswer props