Components / Base / Command menu
B11 · Base
Command menu
A filterable list of example commands. Choosing one writes a line. It does not leave the preview.
<button type="button" aria-expanded="false">Open menu</button>
<div class="c-cmd" hidden>
<input type="text" role="combobox" aria-label="Example commands">
<ul role="listbox"><li role="option">Open register</li></ul>
</div>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A page has many destinations and a keyboard path helps.
- The set can be filtered by typing.
When not to use
- There are fewer than five actions. Show them.
- The menu would be the only way to reach a primary action.
Usage
<button type="button" aria-expanded="false">Open menu</button>
<div class="c-cmd" hidden>
<input type="text" role="combobox" aria-label="Example commands">
<ul role="listbox"><li role="option">Open register</li></ul>
</div>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| role=combobox | input | — | Filters the list. |
| role=listbox / option | list | — | The matches. |
| data-command | name | — | Written into the result line. |
Keyboard
| Key | Action |
|---|---|
| Enter | On the opener, or on a highlighted option, runs it. |
| ArrowUp / ArrowDown | Moves the highlight. |
| Escape | Closes the menu. |
| Type | Filters. |
Accessibility
- The input has a label.
- The list is a listbox.
- The result line states the command in text.
Motion
- The menu opens without a scale animation.
Pattern origin
Base command menu. The gallery’s own menu uses the same keys.