Command Menu
ProA spotlight-style command palette triggered by the ⌘K keyboard shortcut. Opens as a centred modal overlay with a search input that filters available commands, pages, and actions as the user types. Results are grouped by category and navigable with arrow keys. Selecting a result executes the associated action or navigates to the page.
4 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard command menu with grouped results and filter-as-you-type search. | Use as the primary power-user navigation tool accessible from any page via ⌘K. |
| With Sections |
Usage Guidelines
Trigger with ⌘K (Mac) and Ctrl+K (Windows/Linux) globally.
Override ⌘K if the browser or OS uses it for another purpose without providing an alternative.
Filter results in real time as the user types.
Show more than 8 results at a time — keep the list focused and scannable.
Group results by category — Pages, Actions, Settings — with visible section headings.
Require exact matches — use fuzzy matching for forgiveness.
Show keyboard shortcuts inline for commands that have them.
Close the menu on empty results — show a "No results found" message instead.
Code
Design Tokens
Accessibility
- The search input uses role="combobox" with aria-expanded, aria-controls, and aria-activedescendant.
- The results list uses role="listbox" with role="option" for each result item.
- Grouped results use role="group" with aria-labelledby pointing to the section heading.
- The overlay container uses role="dialog" with aria-label="Command menu".
- Focus is trapped within the dialog while open and returns to the trigger element on close.
- Announce result count changes to screen readers via an aria-live="polite" region.