Navbar with Search Bar
Add a search bar to your navbar that opens the command palette when clicked:
NavbarSearch component shows a search input with a keyboard shortcut hint.
When clicked, it calls your onclick handler to open the command palette. Inline Live Search (NavbarSearchField)
A live search box with its own anchored results dropdown — distinct from the pill that
opens the palette. Type e.g. a or pro: one globalSearch call returns a flat result set where each row is tagged with a group (the server's "group column"), and the field buckets them into Products / Users / Pages sections (top 5 each). No per-group requests.
globalSearch(query) returning SearchResult[] with a group field — not three separate queries. Pass groups to control each section's label, order and cap. Search Results Page (SearchResults)
The page-level results list a search navigates to (distinct from the live
dropdown). One item tree, four presets — switch below. The grouped preset
buckets by each row's group; detailed adds the snippet and
meta trail. Backend <mark> highlight renders with allowHtml.
A step-by-step guide covering widget setup, configuration, and troubleshooting for teams of any size.
Endpoints, payloads and rate limits for the Widget REST API.
Advanced widgets with priority support and higher limits.
Administrator · jane.smith@example.com
NavbarSearchInput in a navbar zone or SidebarSearch with an action — a native GET form that lands
on your SearchResults page. <!-- Navbar zone: type-and-go form (Enter → /search?q=…) -->
<NavbarSearchInput action="/search" name="q" placeholder="Search…" />
<!-- Sidebar: trigger (opens palette) OR type-and-go (pass action) -->
<SidebarSearch onclick={() => (showPalette = true)} />
<SidebarSearch action="/search" name="q" />
<!-- Command palette size preset (rc15): --sm / --lg / --xl -->
<CommandPalette bind:show size="lg" {commands} {contexts} />Enhanced command palette with /commands for actions and :contexts for search. Press Ctrl+K or Cmd+K to open.
Quick Start
Display Style:
/ 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 |
: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: