Building a Cmd+K Command Palette: Global Shortcuts, Grouped Search, and Keyboard-Only Navigation
Build a Cmd+K command palette in plain JS — global shortcut, grouped search, keyboard navigation. Free snippet, exports to React, Vue, Angular.
Building a Cmd+K Command Palette: Global Shortcuts, Grouped Search, and Keyboard-Only Navigation
There's a specific moment in a product's growth where the navigation menu stops working. Not literally — the links still click — but the number of things a user might want to do has outgrown the number of things that fit in a sidebar. So features get nested three menus deep, or a search icon gets bolted onto the header, and both solve the problem badly. VS Code, Linear, Raycast, GitHub and Notion all converged on the same fix: press Cmd+K (or Ctrl+K), type a few characters, hit Enter. No hierarchy to remember, no hunting — just naming the thing you want. The interesting part isn't the idea, it's that a real, keyboard-complete implementation is genuinely small — one global keydown listener, one array of commands, one filter function, and about a dozen lines of arrow-key bookkeeping. Nothing here needs a fuzzy-search library or a UI framework. Here it is live: click into the preview and press Cmd+K (or the button), type to filter, and use the arrow keys and Enter without …
