FreeComponent · Navigation
Dropdown Menu
Accessible Vue 3 dropdown menu button with icons, separators, headings, disabled items, arrow-key navigation and click-outside close. Tailwind CSS.
by Vueplay
Vue component$9
Command Palette
A ⌘K / Ctrl+K command palette for Vue 3 with fuzzy search, grouped results, recent items and full keyboard navigation. Tailwind CSS, dark mode.
by Vueplayv1.0.0Updated 2 hours ago
About this component
The quick-jump menu people expect in modern apps: press ⌘K (or Ctrl+K), type a few letters and hit Enter. It searches commands, pages, projects and people in one list, grouped under headings, with matched letters highlighted so it's obvious why each result is there.
Matching is fuzzy and forgiving. Exact substrings rank first, then word-start matches, so “np” finds New project and “gs” finds Go to settings. Accents are ignored, multi-word queries work in any order, and each item can carry keywords, a description and a shortcut hint. When the search is empty the palette shows recently used items, remembered in localStorage.
It follows the WAI-ARIA combobox pattern: the input keeps focus while arrow keys move through the options via aria-activedescendant, the result count is announced to screen readers, and focus goes back where it came from on close. Pass your own items (each can have a perform() callback), or listen for select and route however you like. Slots let you restyle options, the empty state and the footer.
- Global ⌘K / Ctrl+K hotkey, works with or without v-model:open
- Fuzzy ranking with highlighted matches, accent-insensitive
- Grouped results, recent items and a helpful empty state
- Arrow keys, Ctrl+N/P, PageUp/PageDown, Enter and Escape
- Accessible combobox with a live result count
Code
11 files in the repoThe source is included with the purchase.
Buy it once and use it in unlimited projects: remix it in the Studio, clone the repo, or install it with npm. Props and usage are documented below.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the palette is shown. Bind with v-model:open, or leave unbound and let the hotkey toggle it. |
| items | CommandItem[] | defaultCommandItems (sample workspace commands) | Commands to search. Each has id and label, plus optional group, description, keywords, shortcut, icon (24×24 SVG path), avatar initials, disabled and perform(). |
| placeholder | string | 'Type a command or search…' | Placeholder text for the search input. |
| hotkey | string | 'k' | Key that toggles the palette together with ⌘ on macOS or Ctrl elsewhere. Set to '' to disable the global shortcut. |
| recentLimit | number | 4 | How many recently chosen items to remember and show when the search is empty. 0 turns recents off. |
| storageKey | string | 'command-palette:recent' | localStorage key used to persist recents. Set to '' to keep them in memory only. |
| defaultRecent | string[] | ['proj-orbit', 'go-settings'] | Item ids shown under Recent before anything has been picked. |
| maxResults | number | 40 | Maximum number of results shown for a search. |
| closeOnSelect | boolean | true | Close the palette after an item is chosen. |
Events
| Event | Payload | Description |
|---|---|---|
| select | (item: CommandItem) | Fired when an item is chosen with Enter or a click, after its perform() callback runs. |
| update:open | (open: boolean) | Fired when the palette opens or closes (hotkey, Escape, backdrop click or selection). |
Slots
| Slot | Description |
|---|---|
| item | Custom content for each option. Receives { item, active }. |
| empty | Shown when a search has no results. Receives { query }. |
| footer | Replaces the keyboard hints bar at the bottom (hidden on small screens). |
Related components
All navigation →Free
FreeComponent · Navigation
Link
A flexible link component that can act as a router-link for internal navigation or an href for external URLs. Can be used on its own or inside a Navigator.
FreeComponent · Navigation
Pagination Bar
Vue 3 pagination bar with v-model:page, smart ellipsis, prev/next, a page-size picker, compact mobile view and a “Showing X–Y of Z” summary. Tailwind CSS.
by Vueplay
FreeComponent · Navigation
Sidebar Nav
Vue 3 app sidebar with sections, icons, badges, collapsible groups, an icon-only collapsed mode and a mobile off-canvas drawer. Tailwind CSS.
by Vueplay