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

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

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.