macOS Spotlight-style command palette for quick navigation and search. Press Ctrl+K or Cmd+K to open.
Quick Start
Try it now! Click the button above or press Ctrl+K (Windows/Linux) or Cmd+K (Mac) to open the command palette.
Keyboard Shortcuts
| Key | Action |
|---|---|
| Ctrl+K / Cmd+K | Open/close palette |
| ↑ ↓ | Navigate between results |
| ← → | Navigate between pages |
| Enter | Select highlighted result |
| Esc | Close palette |
Context Switching
Use special prefixes to search within specific contexts:
| Prefix | Context | Example |
|---|---|---|
/p |
Products | /p macbook |
/o |
Orders | /o 1001 |
/u |
Users | /u john |
/i |
Invoices | /i 501 |
Pro tip: When you type a context prefix (e.g.,
/p), a label appears showing "Searching in Products" to confirm the active context.
Features
Search Examples
Try these search queries:
Products
Orders
Users
Invoices
Implementation
The command palette is globally available throughout the application:
- JavaScript:
/src/js/command-palette.js - Styles:
src/scss/core-components/_command-palette.scss - Variables:
src/scss/_variables.scss - HTML: Included in
views/layout.mustache
Note: This is a demo with dummy data. In a real application, you would connect the search to your backend API for live results.