command-menu component

Drop-in semantic component. See examples, sizes, variants, and source.

Keyboard-driven command palette for fast navigation and actions. Compose a command-menu-overlay wrapping a command-menu, then add a header (search input), a list of item rows (optionally grouped under group with a group-label), and an optional footer. Triggers use the data-command-menu attribute and the menu is opened/searched/navigated by command-menu.js.

Command Menu System

Trigger - Keyboard shortcut or button with data-command-menu attribute
Search - Fuzzy search to filter commands quickly
Navigation - Arrow keys to navigate, Enter to select, Esc to close

Basic Command Menu

or press Cmd+K

<!-- Trigger Button -->
<button class="button" data-command-menu="basic-menu">Open Command Menu</button>

<!-- Keyboard Shortcut Hint -->
<span class="subhead text-gray-500 ml-2"
  >or press <kbd class="px-2 py-1 text-xs bg-gray-100 border rounded">Cmd+K</kbd></span
>

<!-- Command Menu HTML -->
<div id="basic-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Type a command or search..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      <div class="item" data-command="new-file">
        <i class="icon file-text w-5 h-5"></i>
        <span class="label">New File</span>
        <kbd class="shortcut">Cmd+N</kbd>
      </div>
      <div class="item" data-command="open-file">
        <i class="icon folder-open w-5 h-5"></i>
        <span class="label">Open File</span>
        <kbd class="shortcut">Cmd+O</kbd>
      </div>
      <div class="item" data-command="save">
        <i class="icon save w-5 h-5"></i>
        <span class="label">Save</span>
        <kbd class="shortcut">Cmd+S</kbd>
      </div>
    </div>
  </div>
</div>

<button class="button" data-command-menu="basic-menu">Open Command Menu</button>

<span class="subhead text-gray-500 ml-2"
  >or press <kbd class="px-2 py-1 text-xs bg-gray-100 border rounded">Cmd+K</kbd></span
>

<div id="basic-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Type a command or search..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      <div class="item" data-command="new-file">
        <i class="icon file-text w-5 h-5"></i>
        <span class="label">New File</span>
        <kbd class="shortcut">Cmd+N</kbd>
      </div>
      <div class="item" data-command="open-file">
        <i class="icon folder-open w-5 h-5"></i>
        <span class="label">Open File</span>
        <kbd class="shortcut">Cmd+O</kbd>
      </div>
      <div class="item" data-command="save">
        <i class="icon save w-5 h-5"></i>
        <span class="label">Save</span>
        <kbd class="shortcut">Cmd+S</kbd>
      </div>
    </div>
  </div>
</div>

Grouped Commands

Commands with Groups

<!-- Trigger Button -->
<button class="button primary" data-command-menu="grouped-menu">
  <i class="icon plus w-4 h-4 mr-2"></i>
  Command Palette
</button>

<!-- Command Menu with Groups -->
<div id="grouped-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Search for commands..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      <!-- File Commands Group -->
      <div class="group">
        <div class="group-label">File</div>
        <div class="item" data-command="new-file">
          <i class="icon file-plus w-5 h-5"></i>
          <span class="label">New File</span>
          <kbd class="shortcut">Cmd+N</kbd>
        </div>
        <div class="item" data-command="new-folder">
          <i class="icon folder-plus w-5 h-5"></i>
          <span class="label">New Folder</span>
          <kbd class="shortcut">Shift+Cmd+N</kbd>
        </div>
        <div class="item" data-command="save-all">
          <i class="icon save w-5 h-5"></i>
          <span class="label">Save All Files</span>
          <kbd class="shortcut">Cmd+Alt+S</kbd>
        </div>
      </div>

      <!-- Edit Commands Group -->
      <div class="group">
        <div class="group-label">Edit</div>
        <div class="item" data-command="undo">
          <i class="icon undo w-5 h-5"></i>
          <span class="label">Undo</span>
          <kbd class="shortcut">Cmd+Z</kbd>
        </div>
        <div class="item" data-command="redo">
          <i class="icon redo w-5 h-5"></i>
          <span class="label">Redo</span>
          <kbd class="shortcut">Cmd+Shift+Z</kbd>
        </div>
        <div class="item" data-command="find">
          <i class="icon search w-5 h-5"></i>
          <span class="label">Find</span>
          <kbd class="shortcut">Cmd+F</kbd>
        </div>
      </div>

      <!-- View Commands Group -->
      <div class="group">
        <div class="group-label">View</div>
        <div class="item" data-command="fullscreen">
          <i class="icon maximize w-5 h-5"></i>
          <span class="label">Toggle Fullscreen</span>
          <kbd class="shortcut">F11</kbd>
        </div>
        <div class="item" data-command="zoom-in">
          <i class="icon zoom-in w-5 h-5"></i>
          <span class="label">Zoom In</span>
          <kbd class="shortcut">Cmd++</kbd>
        </div>
        <div class="item" data-command="zoom-out">
          <i class="icon zoom-out w-5 h-5"></i>
          <span class="label">Zoom Out</span>
          <kbd class="shortcut">Cmd+-</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="hint"><kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close</div>
    </div>
  </div>
</div>

<button class="button primary" data-command-menu="grouped-menu">
  <i class="icon plus w-4 h-4 mr-2"></i>
  Command Palette
</button>

<div id="grouped-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input
        type="text"
        class="search"
        placeholder="Search for commands..."
        aria-label="Search commands"
      />
    </div>
    <div class="list">
      
      <div class="group">
        <div class="group-label">File</div>
        <div class="item" data-command="new-file">
          <i class="icon file-plus w-5 h-5"></i>
          <span class="label">New File</span>
          <kbd class="shortcut">Cmd+N</kbd>
        </div>
        <div class="item" data-command="new-folder">
          <i class="icon folder-plus w-5 h-5"></i>
          <span class="label">New Folder</span>
          <kbd class="shortcut">Shift+Cmd+N</kbd>
        </div>
        <div class="item" data-command="save-all">
          <i class="icon save w-5 h-5"></i>
          <span class="label">Save All Files</span>
          <kbd class="shortcut">Cmd+Alt+S</kbd>
        </div>
      </div>

<div class="group">
        <div class="group-label">Edit</div>
        <div class="item" data-command="undo">
          <i class="icon undo w-5 h-5"></i>
          <span class="label">Undo</span>
          <kbd class="shortcut">Cmd+Z</kbd>
        </div>
        <div class="item" data-command="redo">
          <i class="icon redo w-5 h-5"></i>
          <span class="label">Redo</span>
          <kbd class="shortcut">Cmd+Shift+Z</kbd>
        </div>
        <div class="item" data-command="find">
          <i class="icon search w-5 h-5"></i>
          <span class="label">Find</span>
          <kbd class="shortcut">Cmd+F</kbd>
        </div>
      </div>

<div class="group">
        <div class="group-label">View</div>
        <div class="item" data-command="fullscreen">
          <i class="icon maximize w-5 h-5"></i>
          <span class="label">Toggle Fullscreen</span>
          <kbd class="shortcut">F11</kbd>
        </div>
        <div class="item" data-command="zoom-in">
          <i class="icon zoom-in w-5 h-5"></i>
          <span class="label">Zoom In</span>
          <kbd class="shortcut">Cmd++</kbd>
        </div>
        <div class="item" data-command="zoom-out">
          <i class="icon zoom-out w-5 h-5"></i>
          <span class="label">Zoom Out</span>
          <kbd class="shortcut">Cmd+-</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="hint"><kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close</div>
    </div>
  </div>
</div>

Command Menu Sizes

Tiny Command Menu

<button class="button xs" data-command-menu="tiny-menu">Tiny Menu</button>

<div id="tiny-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu xs">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." />
    </div>
    <div class="list">
      <div class="item">
        <span class="label">Copy</span>
        <kbd class="shortcut">⌘C</kbd>
      </div>
      <div class="item">
        <span class="label">Paste</span>
        <kbd class="shortcut">⌘V</kbd>
      </div>
      <div class="item">
        <span class="label">Cut</span>
        <kbd class="shortcut">⌘X</kbd>
      </div>
    </div>
  </div>
</div>

Small Command Menu

<button class="button sm" data-command-menu="small-menu">Small Menu</button>

<div id="small-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu sm">
    <div class="header">
      <input type="text" class="search" placeholder="Type to search..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Quick Actions</div>
        <div class="item">
          <span class="label">Open File</span>
          <kbd class="shortcut">⌘O</kbd>
        </div>
        <div class="item">
          <span class="label">Save File</span>
          <kbd class="shortcut">⌘S</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

Large Command Menu

<button class="button xl" data-command-menu="large-menu">Large Menu</button>

<div id="large-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu xl">
    <div class="header">
      <input type="text" class="search" placeholder="Search for commands, files, or settings..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Suggestions</div>
        <div class="item">
          <i class="icon lock w-6 h-6"></i>
          <div class="content">
            <span class="label">Security Settings</span>
            <span class="description">Configure security and privacy options</span>
          </div>
          <kbd class="shortcut">⌘Shift+S</kbd>
        </div>
        <div class="item">
          <i class="icon settings w-6 h-6"></i>
          <div class="content">
            <span class="label">Appearance</span>
            <span class="description">Customize theme and display settings</span>
          </div>
          <kbd class="shortcut">⌘,</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

<button class="button xl" data-command-menu="large-menu">Large Menu</button>

<div id="large-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu xl">
    <div class="header">
      <input type="text" class="search" placeholder="Search for commands, files, or settings..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Suggestions</div>
        <div class="item">
          <i class="icon lock w-6 h-6"></i>
          <div class="content">
            <span class="label">Security Settings</span>
            <span class="description">Configure security and privacy options</span>
          </div>
          <kbd class="shortcut">⌘Shift+S</kbd>
        </div>
        <div class="item">
          <i class="icon settings w-6 h-6"></i>
          <div class="content">
            <span class="label">Appearance</span>
            <span class="description">Customize theme and display settings</span>
          </div>
          <kbd class="shortcut">⌘,</kbd>
        </div>
      </div>
    </div>
  </div>
</div>

Big Command Menu

<button class="button lg" data-command-menu="big-menu">Big Command Palette</button>

<div id="big-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu lg">
    <div class="header">
      <div class="breadcrumb">
        <span>Home</span>
        <span class="separator">/</span>
        <span class="current">Commands</span>
      </div>
      <input type="text" class="search" placeholder="Search everything..." />
      <div class="filters">
        <button class="filter-btn active">All</button>
        <button class="filter-btn">Files</button>
        <button class="filter-btn">Commands</button>
        <button class="filter-btn">Settings</button>
      </div>
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Recent</div>
        <div class="item">
          <i class="icon file-text w-6 h-6"></i>
          <div class="content">
            <span class="label">Format Document</span>
            <span class="description">Apply formatting to the entire document</span>
          </div>
          <kbd class="shortcut">Alt+Shift+F</kbd>
        </div>
      </div>
      <div class="group">
        <div class="group-label">All Commands</div>
        <div class="item">
          <i class="icon upload w-6 h-6"></i>
          <div class="content">
            <span class="label">Upload Files</span>
            <span class="description">Upload files from your computer</span>
          </div>
          <kbd class="shortcut">⌘U</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="status">
        <span class="count">42 commands</span>
      </div>
      <div class="hint">
        <kbd>Tab</kbd> Next section <kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close
      </div>
    </div>
  </div>
</div>

<button class="button lg" data-command-menu="big-menu">Big Command Palette</button>

<div id="big-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu lg">
    <div class="header">
      <div class="breadcrumb">
        <span>Home</span>
        <span class="separator">/</span>
        <span class="current">Commands</span>
      </div>
      <input type="text" class="search" placeholder="Search everything..." />
      <div class="filters">
        <button class="filter-btn active">All</button>
        <button class="filter-btn">Files</button>
        <button class="filter-btn">Commands</button>
        <button class="filter-btn">Settings</button>
      </div>
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Recent</div>
        <div class="item">
          <i class="icon file-text w-6 h-6"></i>
          <div class="content">
            <span class="label">Format Document</span>
            <span class="description">Apply formatting to the entire document</span>
          </div>
          <kbd class="shortcut">Alt+Shift+F</kbd>
        </div>
      </div>
      <div class="group">
        <div class="group-label">All Commands</div>
        <div class="item">
          <i class="icon upload w-6 h-6"></i>
          <div class="content">
            <span class="label">Upload Files</span>
            <span class="description">Upload files from your computer</span>
          </div>
          <kbd class="shortcut">⌘U</kbd>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="status">
        <span class="count">42 commands</span>
      </div>
      <div class="hint">
        <kbd>Tab</kbd> Next section <kbd>↑↓</kbd> Navigate <kbd>↵</kbd> Select <kbd>esc</kbd> Close
      </div>
    </div>
  </div>
</div>

Command Menu States

Empty State

<button class="button" data-command-menu="empty-menu">Empty State Demo</button>

<div id="empty-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." value="xyz123" />
    </div>
    <div class="list">
      <div class="empty">
        <i class="icon search lg empty-icon"></i>
        <p class="empty-title">No results found</p>
        <p class="empty-description">Try searching with different keywords</p>
      </div>
    </div>
  </div>
</div>

Loading State

<button class="button" data-command-menu="loading-menu">Loading State Demo</button>

<div id="loading-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Search..." value="project" />
    </div>
    <div class="list">
      <div class="loading">
        <div class="spinner"></div>
        <p>Searching...</p>
      </div>
    </div>
  </div>
</div>

Inline Command Search

Inline Command Menu

<div class="command-menu inline">
  <div class="header">
    <input type="text" class="search" placeholder="Quick command search..." />
  </div>
  <div class="list" style="max-height: 200px">
    <div class="item">
      <span class="label">Go to Dashboard</span>
      <kbd class="shortcut">G D</kbd>
    </div>
    <div class="item">
      <span class="label">View Profile</span>
      <kbd class="shortcut">G P</kbd>
    </div>
    <div class="item">
      <span class="label">Settings</span>
      <kbd class="shortcut">G S</kbd>
    </div>
    <div class="item">
      <span class="label">Help</span>
      <kbd class="shortcut">?</kbd>
    </div>
  </div>
</div>

Interactive Commands

Commands with Actions

<button class="button positive" data-command-menu="action-menu">Action Commands</button>

<div id="action-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Run command..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Theme</div>
        <div
          class="item"
          onclick="document.body.classList.toggle('dark'); this.querySelector('.label').textContent = document.body.classList.contains('dark') ? 'Switch to Light Mode' : 'Switch to Dark Mode';"
        >
          <i class="icon sun w-5 h-5"></i>
          <span class="label">Switch to Dark Mode</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Navigation</div>
        <div class="item" onclick="alert('Navigating to Dashboard');">
          <i class="icon layout-grid w-5 h-5"></i>
          <span class="label">Dashboard</span>
        </div>
        <div class="item" onclick="alert('Opening Settings');">
          <i class="icon settings w-5 h-5"></i>
          <span class="label">Settings</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Actions</div>
        <div
          class="item"
          onclick="navigator.clipboard.writeText('Hello!'); alert('Copied to clipboard!');"
        >
          <i class="icon copy w-5 h-5"></i>
          <span class="label">Copy Sample Text</span>
        </div>
      </div>
    </div>
  </div>
</div>

<button class="button positive" data-command-menu="action-menu">Action Commands</button>

<div id="action-menu" class="command-menu-overlay hidden" aria-hidden="true">
  <div class="command-menu">
    <div class="header">
      <input type="text" class="search" placeholder="Run command..." />
    </div>
    <div class="list">
      <div class="group">
        <div class="group-label">Theme</div>
        <div
          class="item"
          onclick="document.body.classList.toggle('dark'); this.querySelector('.label').textContent = document.body.classList.contains('dark') ? 'Switch to Light Mode' : 'Switch to Dark Mode';"
        >
          <i class="icon sun w-5 h-5"></i>
          <span class="label">Switch to Dark Mode</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Navigation</div>
        <div class="item" onclick="alert('Navigating to Dashboard');">
          <i class="icon layout-grid w-5 h-5"></i>
          <span class="label">Dashboard</span>
        </div>
        <div class="item" onclick="alert('Opening Settings');">
          <i class="icon settings w-5 h-5"></i>
          <span class="label">Settings</span>
        </div>
      </div>
      <div class="group">
        <div class="group-label">Actions</div>
        <div
          class="item"
          onclick="navigator.clipboard.writeText('Hello!'); alert('Copied to clipboard!');"
        >
          <i class="icon copy w-5 h-5"></i>
          <span class="label">Copy Sample Text</span>
        </div>
      </div>
    </div>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`command-menu-overlay`	Full-screen overlay that hosts the menu	Toggle `hidden` / `active` via JS
	`command-menu`	The menu container itself	Holds header, list, footer
	`data-command-menu`	Trigger attribute — value matches menu `id`	Wired by `command-menu.js`
Sizes	`xs`	320px wide — tiny	Modifier on `command-menu`
	`sm`	448px wide — small	Modifier on `command-menu`
	(default)	600px wide — medium	No size class needed
	`xl`	768px wide — large	Modifier on `command-menu`
	`lg`	896px wide — big	Modifier on `command-menu`
Structure	`header`	Top section with the search input	Child of `command-menu`
	`search`	Search `<input>` inside the header	Filters items as you type
	`list`	Scrollable container of items / groups	Child of `command-menu`
	`group`	Wraps related items under a heading	Child of `list`
	`group-label`	Heading text for a group	First child of `group`
	`item`	A single command row	Add `data-command="..."` for JS hooks
	`label`	Item title text	Inside `item`
	`description`	Secondary text below the label	Inside `item .content`
	`shortcut`	Right-aligned `<kbd>` hint	Inside `item`
States	`active`	Currently selected item (keyboard focus)	Toggled by JS during arrow-key navigation
	`disabled`	Non-interactive item	Modifier on `item`
	`hidden`	Closed overlay state	Toggle on `command-menu-overlay`
	`empty`	No-results placeholder block	Pair with `empty-icon`, `empty-title`, `empty-description`
	`loading`	Loading placeholder block	Contains `spinner`
Variant	`inline`	Embeds the menu in-page (no overlay)	Modifier on `command-menu`
Variant	`footer`	Bottom hint bar with kbd legend	Optional child of `command-menu`