Command Menu

A search field over a grouped list of actions and destinations, opened from a shortcut. Typing narrows the list; arrow keys move through it; Enter runs the highlighted item.

Preview

When to use

• For products with many actions and pages, so people can reach any of them without the mouse.
• As a second way in to things that already exist in the navigation, not the only way.
• With groups — Suggestions, Pages, Actions — so a long result list stays scannable.

Reach for something else

• For picking a value inside a form field: that is a Combobox.
• For a short set of actions on one element: that is a Popover or a context menu.

Anatomy

1. 1

   Surface

   A panel with a hairline ring, centred near the top of the view.

2. 2

   Search field

   Leading search icon, placeholder, focused on open.

3. 3

   Group heading

   A small label above each set of results.

4. 4

   Item

   Icon, label and, optionally, the item's shortcut on the right.

5. 5

   Highlight

   A soft wash on the active item, moved by arrow keys or hover.

6. 6

   Empty state

   One line that says nothing matched, with the query in it.

States

Accessibility

• The field is a combobox (role="combobox", aria-expanded, aria-controls) that owns a role="listbox" of role="option" items.
• Focus stays in the field; aria-activedescendant points at the highlighted option, so Up and Down move it and Enter selects.
• Escape closes the menu and returns focus to where it was opened from.
• The number of results is announced through a polite live region as the list changes.

Source

The Command Menu is in the Figma library today, with every variant and state above. Its React and Vue source ships with the code library, free, and this page gets the install line, the props and the code the day it does.

See it in a block