--- title: "Command palette UI: anatomy, variants and examples | Kombai" description: "A command palette is a search box, opened with a keyboard shortcut, that finds and runs any page or action in an app." canonical_url: https://kombai.com/glossary/command-palette/ author: "The Kombai Team" --- # Command palette A command palette is a search box, opened with a keyboard shortcut, that finds and runs any page or action in an app. - Also called: command menu, cmd+k, quick switcher - Platforms: Web - In the Kombai gallery: [59 web designs](https://kombai.com/gallery/web/command-palette/) - [Kestrel](https://kombai.com/gallery/inspirations/command-palette-web-13/) (Web) - [Ashcroft](https://kombai.com/gallery/inspirations/command-palette-web-32/) (Web) - [Recents](https://kombai.com/gallery/inspirations/command-palette-web-50/) (Web) ## What is a command palette? A command palette is a floating search box that opens over the app, usually with Cmd+K or Ctrl+K. People type a few letters and the list below narrows to the matching pages, records and actions. Arrow keys move through the results, Enter runs the highlighted one and the palette closes, so people never reach for the mouse. - One box covers both navigation and actions, so people search instead of hunting through menus. - It works from anywhere in the app with the same shortcut, and every result can be picked from the keyboard. ## When to use command palette - **Apps with many pages and actions.** Tools where the menus can no longer show everything people do. - **Frequent, keyboard-heavy users.** Editors, issue trackers and design tools used for hours a day. - **Jumping between records.** Opening a project, a person or a file by name in a couple of keystrokes. ## When not to use one - **As the only way in.** Most people never press the shortcut. Keep visible menus and buttons for every action. - **Small apps with a few screens.** A clear navbar or side navigation is faster to scan than typing. - **Searching long content.** Full-text search with filters and a results page suits documents and catalogs better. ## Anatomy 1. **Search field**: Filters the list as people type 2. **Group label**: Separates pages from actions 3. **Result row**: Icon, name and a hint 4. **Shortcut hint**: The key that runs it directly 5. **Footer**: Keys to move, pick and close 6. **States**: Closed, open, filtered, empty ## Variants We sorted every command palette design in the Kombai gallery and found five patterns. ### 1. Action lists with shortcuts A list of commands, each with an icon and the key that runs it, so people learn the shortcut while they search. - [Foldline](https://kombai.com/gallery/inspirations/command-palette-web-17/) (Web) - [Trellis](https://kombai.com/gallery/inspirations/command-palette-web-21/) (Web) - [Stipple](https://kombai.com/gallery/inspirations/command-palette-web-44/) (Web) ### 2. Search with filters Tabs or chips across the top narrow results to tasks, pages, people or files, and each row shows where the item lives. - [Marlowe](https://kombai.com/gallery/inspirations/command-palette-web-31/) (Web) - [Bindery](https://kombai.com/gallery/inspirations/command-palette-web-45/) (Web) - [Quillstone](https://kombai.com/gallery/inspirations/command-palette-web-25/) (Web) ### 3. Jump-to navigation A short list of the app's pages and recent places, so people move around the app without the sidebar. - [Piermont](https://kombai.com/gallery/inspirations/command-palette-web-12/) (Web) - [Fernpost](https://kombai.com/gallery/inspirations/command-palette-web-29/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/command-palette-web-57/) (Web) ### 4. Results with a preview A split panel that shows the highlighted result on the right, so people check it before opening it. - [Wrenly](https://kombai.com/gallery/inspirations/command-palette-web-11/) (Web) - [Cairn](https://kombai.com/gallery/inspirations/command-palette-web-23/) (Web) - [Sumhaus](https://kombai.com/gallery/inspirations/command-palette-web-38/) (Web) ### 5. Nested and scoped steps Picking a command opens a second list in the same box, like snooze times, or a chip limits the search to one area. - [Shared Inbox](https://kombai.com/gallery/inspirations/command-palette-web-28/) (Web) - [Rookwood](https://kombai.com/gallery/inspirations/command-palette-web-54/) (Web) - [Formwork](https://kombai.com/gallery/inspirations/command-palette-web-16/) (Web) ## Where command palettes show up ### Developer tools and consoles Editor commands, docs search and service lookups in code editors, backend consoles and incident tools. - [Quarry](https://kombai.com/gallery/inspirations/command-palette-web-18/) (Web) - [Halyard](https://kombai.com/gallery/inspirations/command-palette-web-19/) (Web) - [Thornbury](https://kombai.com/gallery/inspirations/command-palette-web-56/) (Web) ### Issue trackers and project tools Assigning, changing status and finding issues without leaving the list. - [Kestrel](https://kombai.com/gallery/inspirations/command-palette-web-48/) (Web) - [Rivetwork](https://kombai.com/gallery/inspirations/command-palette-web-40/) (Web) - [Slatemark](https://kombai.com/gallery/inspirations/command-palette-web-49/) (Web) ### Docs, notes and chat history Finding a page, a past conversation or a line of copy by a word in it. - [Alder](https://kombai.com/gallery/inspirations/command-palette-web-14/) (Web) - [Almanac](https://kombai.com/gallery/inspirations/command-palette-web-20/) (Web) - [Verso](https://kombai.com/gallery/inspirations/command-palette-web-27/) (Web) ## Command palette vs similar components | | [Command palette](https://kombai.com/glossary/command-palette/) | [Search bar](https://kombai.com/glossary/search-bar/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | |---|---|---|---| | Opens from | A keyboard shortcut, from anywhere | Always on the page | A visible button | | Finds | Pages, records and actions | Content, shown on a results page | Actions for one thing | | Best for | Frequent users moving fast | Anyone looking for content | A few actions in context | ## Build notes - Open the palette with Cmd+K on macOS and Ctrl+K elsewhere, and also from a visible search button for people who never learn the shortcut. - Render it as a modal dialog with focus in the search field on open. Escape closes it and returns focus to where people were. - Give the field role="combobox" with aria-expanded and aria-controls pointing at a role="listbox" of results. - Keep focus in the field and mark the highlighted row with aria-activedescendant, so people keep typing while the arrow keys move the highlight. - Match loosely: ignore case, match the start of each word and rank recent and frequent items first. - Show a short empty state when nothing matches, and announce the result count in a polite live region. ## FAQ ### What's the difference between a command palette and a search bar? A search bar finds content and usually shows it on a results page. A command palette also runs actions, like creating an issue or switching theme, and it closes as soon as people pick something. ### Which shortcut should open a command palette? Cmd+K on macOS and Ctrl+K on Windows and Linux are the most common. Some editors use Cmd+Shift+P instead. Pick one that does not clash with the browser or with typing, and show it next to the search button. ### What should a command palette show before people type? Recent items and a few suggested actions, grouped under small labels. An empty box gives no hint of what the palette can do. ### Do command palettes work on mobile? They are built for keyboards, so they matter most on desktop. On phones, the same search can sit behind a search button and open full screen, with large rows for tapping. ## Related terms - [Search bar](https://kombai.com/glossary/search-bar/) - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Dialog](https://kombai.com/glossary/dialog/) - [Context menu](https://kombai.com/glossary/context-menu/) ## References - [WAI-ARIA Authoring Practices: Combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) - [WAI-ARIA Authoring Practices: Dialog (modal) pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) - [MDN: aria-activedescendant](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant)