command-menu Component
Command Menu System
The command menu provides a keyboard-driven interface for quick access to application commands and navigation. Press Cmd+K or Ctrl+K to open.
- Trigger - Keyboard shortcut or button with
data-command-menuattribute - 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
New File
Cmd+N
Open File
Cmd+O
Save
Cmd+S
<!-- Trigger Button -->
<button class="button" data-command-menu="basic-menu">
Open Command Menu
</button>
<!-- Keyboard Shortcut Hint -->
<span class="text-sm 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">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
</svg>
<span class="label">New File</span>
<kbd class="shortcut">Cmd+N</kbd>
</div>
<div class="item" data-command="open-file">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
</svg>
<span class="label">Open File</span>
<kbd class="shortcut">Cmd+O</kbd>
</div>
<div class="item" data-command="save">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<span class="label">Save</span>
<kbd class="shortcut">Cmd+S</kbd>
</div>
</div>
</div>
</div>Grouped Commands
Commands with Groups
File
New File
Cmd+N
New Folder
Shift+Cmd+N
Save All Files
Cmd+Alt+S
Edit
Undo
Cmd+Z
Redo
Cmd+Shift+Z
Find
Cmd+F
View
Toggle Fullscreen
F11
Zoom In
Cmd++
Zoom Out
Cmd+-
↑↓ Navigate
↵ Select
esc Close
<!-- Trigger Button -->
<button class="button primary" data-command-menu="grouped-menu">
<svg class="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 12h18m-9-9v18"/>
</svg>
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">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<polyline points="14 2 14 8 20 8"/>
<line x1="12" y1="18" x2="12" y2="12"/>
<line x1="9" y1="15" x2="15" y2="15"/>
</svg>
<span class="label">New File</span>
<kbd class="shortcut">Cmd+N</kbd>
</div>
<div class="item" data-command="new-folder">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
<line x1="12" y1="11" x2="12" y2="17"/>
<line x1="9" y1="14" x2="15" y2="14"/>
</svg>
<span class="label">New Folder</span>
<kbd class="shortcut">Shift+Cmd+N</kbd>
</div>
<div class="item" data-command="save-all">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
<polyline points="17 21 17 13 7 13 7 21"/>
<polyline points="7 3 7 8 15 8"/>
</svg>
<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">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="1 4 1 10 7 10"/>
<path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
</svg>
<span class="label">Undo</span>
<kbd class="shortcut">Cmd+Z</kbd>
</div>
<div class="item" data-command="redo">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="23 4 23 10 17 10"/>
<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
</svg>
<span class="label">Redo</span>
<kbd class="shortcut">Cmd+Shift+Z</kbd>
</div>
<div class="item" data-command="find">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
<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">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>
</svg>
<span class="label">Toggle Fullscreen</span>
<kbd class="shortcut">F11</kbd>
</div>
<div class="item" data-command="zoom-in">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
<line x1="11" y1="8" x2="11" y2="14"/>
<line x1="8" y1="11" x2="14" y2="11"/>
</svg>
<span class="label">Zoom In</span>
<kbd class="shortcut">Cmd++</kbd>
</div>
<div class="item" data-command="zoom-out">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
<line x1="8" y1="11" x2="14" y2="11"/>
</svg>
<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
Copy
⌘C
Paste
⌘V
Cut
⌘X
<button class="button tiny" data-command-menu="tiny-menu">
Tiny Menu
</button>
<div id="tiny-menu" class="command-menu-overlay hidden" aria-hidden="true">
<div class="command-menu tiny">
<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
Quick Actions
Open File
⌘O
Save File
⌘S
<button class="button small" data-command-menu="small-menu">
Small Menu
</button>
<div id="small-menu" class="command-menu-overlay hidden" aria-hidden="true">
<div class="command-menu small">
<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
Suggestions
Security Settings
Configure security and privacy options
⌘Shift+S
Appearance
Customize theme and display settings
⌘,
<button class="button large" data-command-menu="large-menu">
Large Menu
</button>
<div id="large-menu" class="command-menu-overlay hidden" aria-hidden="true">
<div class="command-menu large">
<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">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="11" width="18" height="10" rx="2" ry="2"/>
<path d="M7 11V7a5 5 0 0 1 10 0v4"/>
</svg>
<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">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v6m0 6v6m4.22-10.22l4.24-4.24M6.34 6.34L2.1 2.1m17.8 17.8l-4.24-4.24M6.34 17.66L2.1 21.9"/>
</svg>
<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
Home
/
Commands
Recent
Format Document
Apply formatting to the entire document
Alt+Shift+F
All Commands
Upload Files
Upload files from your computer
⌘U
42 commands
Tab Next section
↑↓ Navigate
↵ Select
esc Close
<button class="button big" 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 big">
<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">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
</svg>
<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">
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<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
No results found
Try searching with different keywords
<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">
<svg class="empty-icon" viewBox="0 0 24 24" width="48" height="48" fill="none" stroke="currentColor" stroke-width="1.5">
<circle cx="11" cy="11" r="8"/>
<path d="m21 21-4.35-4.35"/>
</svg>
<p class="empty-title">No results found</p>
<p class="empty-description">Try searching with different keywords</p>
</div>
</div>
</div>
</div>Loading State
Searching...
<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
Go to Dashboard
G D
View Profile
G P
Settings
G S
Help
?
<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
Theme
Switch to Dark Mode
Navigation
Dashboard
Settings
Actions
Copy Sample Text
<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';">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/>
<line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/>
<line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<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');">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<rect x="3" y="3" width="7" height="7"/>
<rect x="14" y="3" width="7" height="7"/>
<rect x="14" y="14" width="7" height="7"/>
<rect x="3" y="14" width="7" height="7"/>
</svg>
<span class="label">Dashboard</span>
</div>
<div class="item" onclick="alert('Opening Settings');">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="3"/>
<path d="M12 1v6m0 6v6m4.22-10.22l4.24-4.24M6.34 6.34L2.1 2.1m17.8 17.8l-4.24-4.24M6.34 17.66L2.1 21.9"/>
</svg>
<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!');">
<svg class="icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
</svg>
<span class="label">Copy Sample Text</span>
</div>
</div>
</div>
</div>
</div>