Skip to main content

Overview

Command Palette gives users rapid keyboard navigation and quick actions with Ctrl+K or Cmd+K.

Live Example

Below is a live inline view of the Command Palette modal interface, featuring search filtering, action items, shortcut hints, and a navigation footer:

🔍
  • Navigation
  • 📊 Go to Dashboard G D
  • 📁 View Projects G P
  • Preferences
  • 🌓 Toggle Dark Mode T
Navigation: ↑ ↓ to select Esc to close 
<div class="command-palette" role="dialog" aria-modal="true">
  <div class="command-palette-header">
    <span class="text-secondary me-2"><span>🔍</span></span>
    <input type="text" class="command-palette-input" id="commandInput" name="commandQuery" placeholder="Type a command or search...">
  </div>
  <ul class="command-palette-results">
    <li class="command-palette-group-title"><span>Navigation</span></li>
    <li class="command-palette-item active">
      <span class="command-palette-item-title">
        <span>📊</span>
        <span>Go to Dashboard</span>
      </span>
      <span class="command-palette-item-shortcut"><kbd>G D</kbd></span>
    </li>
    <li class="command-palette-item">
      <span class="command-palette-item-title">
        <span>📁</span>
        <span>View Projects</span>
      </span>
      <span class="command-palette-item-shortcut"><kbd>G P</kbd></span>
    </li>
  </ul>
  <div class="command-palette-footer">
    <span>Navigation: <kbd>↑</kbd> <kbd>↓</kbd> to select</span>
    <span><kbd>Esc</kbd> to close</span>
  </div>
</div>

Triggering from JavaScript

You can launch a command palette programmatically or via the global keyboard listener:

const palette = boodoo.CommandPalette.getOrCreateInstance(document.querySelector('#my-palette'), {
  items: [
    { title: 'Dashboard', href: '/dashboard', icon: '📊', shortcut: 'G D' },
    { title: 'Toggle Theme', action: () => boodoo.theme.toggle(), icon: '🌓' }
  ]
});

palette.open();