Command menus give users fast keyboard-driven navigation. These 3 patterns cover spotlight search, VS Code-style command palette and tabbed quick navigation.
Key Pattern
<!-- Trigger button -->
<button onclick="openMenu()">Search <kbd>⌘K</kbd></button>
<!-- Fixed overlay -->
<div id="menu" style="display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.6);">
<div style="max-width:540px;margin:80px auto 0;">
<input autofocus oninput="filter(this.value)">
<div id="results"></div>
</div>
</div>
1. Bootstrap 5 Spotlight Search (⌘K)
Cmd+K triggered search overlay — spotlight style with live filtering.
2. Bootstrap 5 Command Palette
Command palette with grouped actions, keyboard shortcuts and icons — inspired by VS Code.
Frequently Asked Questions
Listen for the keyboard shortcut: document.addEventListener('keydown', e => { if((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); openSearch(); } }). Show a fixed overlay with a search input. Filter your items array on input and render results dynamically.
Use a fixed full-screen overlay with a dark background. Inside, a container with a search input and a results list. Filter a predefined commands array on input. Add keyboard navigation with ArrowUp/ArrowDown and Enter to select.
Listen for the keydown event on the input or document: if(e.key === 'Escape') closeMenu(). Also close when clicking the backdrop (the dark overlay outside the menu): overlay.addEventListener('click', e => { if(e.target === overlay) closeMenu(); }).
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.