navbar command search palette cmdk app command palette cmdk search keyboard header header with command palette search cmdk style top bar
Navbar Command
Fetch pattern JSON:
curl https://webspire.de/patterns/navbar/command.json command.html
<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
<div class="mx-auto flex max-w-7xl items-center gap-4 px-6 py-3">
<!-- Brand -->
<a href="#" class="flex items-center gap-2 text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">
<span class="flex h-7 w-7 items-center justify-center rounded-md bg-[var(--ws-navbar-active)] text-white">
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2L3 14h7v8l10-12h-7z"/></svg>
</span>
<span class="hidden sm:inline">Linearity</span>
</a>
<!-- Command field (central element) -->
<button type="button" class="group flex flex-1 items-center gap-3 rounded-lg border border-[var(--ws-navbar-border)] bg-[var(--ws-color-surface-alt)] px-3.5 py-2 text-left text-sm text-[var(--ws-navbar-text-muted)] transition hover:border-[var(--ws-color-border-strong)]">
<svg class="h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M11 18a7 7 0 100-14 7 7 0 000 14z"/></svg>
<span class="flex-1 truncate">Search projects, issues, docs…</span>
<kbd class="hidden items-center gap-0.5 rounded border border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)] px-1.5 py-0.5 font-sans text-xs font-medium text-[var(--ws-navbar-text-muted)] sm:inline-flex">
<span aria-hidden="true">⌘</span>K
</kbd>
</button>
<!-- Actions -->
<div class="flex items-center gap-2">
<button type="button" aria-label="Create new" class="hidden h-9 items-center gap-1.5 rounded-lg bg-[var(--ws-navbar-active)] px-3 text-sm font-semibold text-white transition hover:opacity-90 sm:inline-flex">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
New
</button>
<button type="button" aria-label="Account" class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--ws-navbar-hover-bg)] text-sm font-semibold text-[var(--ws-navbar-text)]">JS</button>
</div>
</div>
</header>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
navbarcommandsearchpalettecmdkapp
Slots
| Name | Required | Description |
|---|---|---|
| brand | Yes | Compact logo mark and name. |
| command | Yes | Central command/search trigger with keyboard hint. |
| actions | No | Create button and account control. |
Command-center header in the Navbar family. Puts a central search/command field first — the cmdk pattern from Linear, GitHub, and Notion — instead of a row of navigation links.