Usage #
Examples #
Basic #
CommandMenu accepts Menu-style items via the model prop. Leaf items support an optional keywords field for the default scorer and groups are expressed as items with nested items.
Filter #
A custom filter function can be provided with the filter property. It receives the raw item and the current search term, and should return a positive score (higher = better rank), or 0 to drop the item.
Controlled #
The search query is exposed via v-model:search. Bind it to external state to read, reset, or prefill the query — the filtered list updates in both directions.
With Dialog #
CommandMenu can be used inside a Dialog to create a command palette experience. Press Ctrl+L (or Cmd+L on Mac) to open.
Custom #
The item and submenulabel slots are forwarded to the underlying Menu. Use them to render a custom icon, a category label, or any other per-item UI.
Accessibility #
Screen Reader
CommandMenu pairs a combobox input with the Menu component that renders the results. The input exposes aria-autocomplete="list" and aria-controls (omitted when the filtered list is empty), and the focused item is announced via aria-activedescendant. Use ariaLabel or ariaLabelledby to label the Menu when context is not clear from the DOM.
Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus to the search input. |
| down arrow | Moves focus to the next item. |
| up arrow | Moves focus to the previous item. |
| home | Moves focus to the first item. |
| end | Moves focus to the last item. |
| enter | Activates the focused item and emits the select event. |