Navbar with Search Bar
Add a search bar to your navbar that opens the command palette when clicked:
Usage: The
NavbarSearch component shows a search input with a keyboard shortcut hint.
When clicked, it calls your onclick handler to open the command palette. Enhanced command palette with /commands for actions and :contexts for search. Press Ctrl+K or Cmd+K to open.
Quick Start
Display Style:
Try it! Type
/ for commands or : for search contexts. Commands (/)
| 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 |
/theme | /t | Change the visual theme | theme |
Search Contexts (:)
Use : prefix to search within a specific context:
| Shortcut | Name | Example |
|---|---|---|
:p | Products | :p search term |
:u | Users | :u search term |
:o | Orders | :o search term |
Tip: Aliases work too! Try
:products or :users. Multi-Step Commands
Commands can have multiple steps with conditional logic:
Example: /deploy (2 steps)
- Type
/deployand press Space - Select environment (Development, Staging, Production)
- " branch " is auto-added
- Select or type a branch name
- Press Enter to execute
Example: /assign (2 steps)
- Type
/assignand press Space - Select an item (bug, feature, task)
- " to " is auto-added
- Select a team member
- Press Enter to execute
Example: /go (free text)
- Type
/goand press Space - Select a page or type a custom path
- Press Enter to navigate
Keyboard Shortcuts
| Key | Action |
|---|---|
| Ctrl+K / Cmd+K | Open/close palette |
| ↑ ↓ | Navigate options |
| Enter / Tab | Select option |
| Esc | Close and reset |
Try These
Click to open palette with pre-filled text:
Commands
Context Search
Global Search
Commands
Deploy to Environment
AltD
Assign to User
AltA
Go to Page
AltG
Switch Theme
AltT
Search In
Products
Users
Orders