macOS Spotlight-style command palette for quick navigation and search. Press Ctrl+K or Cmd+K to open.
Quick Start
Open the command palette and try the different modes:
Display style:
Modes
| Prefix | Mode | Description |
|---|---|---|
/ |
Commands | Multi-step action wizards |
: |
Search | Scoped entity search |
(none) |
Global | Search everything |
Keyboard Shortcuts
| Key | Action |
|---|---|
| Ctrl+K / Cmd+K | Open/close palette |
| ↑ ↓ | Navigate between results |
| Enter / Tab | Select item or submit free text |
| Esc | Close palette |
Commands /
Type / to see all commands. Multi-step commands guide you through selections:
| Command | Aliases | Description | Steps |
|---|---|---|---|
/deploy |
/d |
Deploy a branch to an environment | environment → branch |
/assign |
/a |
Assign an item to a team member | item → user |
/go |
/g /nav |
Navigate to a page | page (free text) |
/theme |
/t |
Switch the visual theme | theme |
Context Search :
Type : to see all search contexts. Select one, then type to search within it:
| Context | Aliases | Example |
|---|---|---|
:p |
:products |
:p macbook |
:u |
:users |
:u john |
:o |
:orders |
:o 1001 |
Global search: Just start typing without a prefix to search across all categories (3 results per category).
Features
Search Examples
Try these — click to open the palette with the query pre-filled:
Commands
Context Search
Global Search
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.