shadcn.io is an independent project built on shadcn/ui
An outline Open Command Menu button opens the popover. Suggestions lists Calendar, Search Emoji, and Calculator, with a search field above them.
Use the popover when the menu should stay beside the button. A Dropdown Menu fits if nobody needs to type a filter. In Vue, Ark UI highlights a row and waits for you.
Installation
Anatomy
Usage
<Popover @open-change="handleOpenChange" :positioning='{ placement: "bottom-start" }'>
<PopoverTrigger :asChild="true">
<Button variant="outline">Open Command Menu</Button>
</PopoverTrigger>
<PopoverContent class="w-[400px] max-w-[calc(100vw-2rem)] p-0">
<PopoverTitle class="sr-only">Open Command Menu</PopoverTitle>
<Command :collection="collection" @input-value-change="handleInputValueChange">
<CommandInput placeholder="Type a command or search..." />
<CommandContent>
<CommandList>
<CommandEmpty>No results found.</CommandEmpty>
<CommandGroup heading="Suggestions">
<CommandItem v-for="item in collection.items" :item="item" :key="item.value">
{{ item.label }}
</CommandItem>
</CommandGroup>
</CommandList>
</CommandContent>
</Command>
</PopoverContent>
</Popover>FAQ
How is this menu anchored to the button?
The Open Command Menu button is the trigger, and the panel opens below it, lined up with its start edge. The panel is 400px wide, never wider than the screen, and has no padding, so the Command fills it. A visually hidden PopoverTitle names it.
PopoverTrigger takes the button with asChild, and positioning on Popover sets placement: "bottom-start". When the popover closes, the demo clears the filter.
What commands are in this menu?
One CommandGroup with the heading Suggestions holds three CommandItems: Calendar, Search Emoji and Calculator. Each item's text is its only content.
Should this be a Command or a Combobox?
Use a Command to run an action or jump somewhere. Use a Combobox when the choice is a value that stays in a form field.
What appears when nothing matches the search?
CommandEmpty in the list says "No results found." It shows only when the search leaves nothing.
How do I run an item from this menu in Vue?
These items don't run anything yet.
Listen to @value-change on Command, which receives the chosen item's value, and keep value empty so every choice fires.
How do the keys work in this menu?
The arrow keys move through the items, Enter runs the highlighted one, and typing filters the list. Escape or a click outside closes the popover, and focus goes back to the button. CommandInput shows "Type a command or search..." until someone types.
The filtering is the demo's: it builds the items with useListCollection and a contains filter, and calls filter with the input's value as it changes.
API Reference
Popover
Sets open-change="handleOpenChange", positioning="{ placement: bottom-start }" and asChild. The rest is on the Popover page.
Button
Sets variant="outline". The rest is on the Button page.
Command
Sets collection="collection", input-value-change="handleInputValueChange", placeholder="Type a command or search...", heading="Suggestions", v-for="item in collection.items" and item="item". The rest is on the Command page.
