navbar status dashboard operations console live status operational uptime console dashboard header header with live system status operations dashboard top bar
Navbar Status
Fetch pattern JSON:
curl https://webspire.de/patterns/navbar/status.json status.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 flex-wrap items-center gap-x-6 gap-y-3 px-6 py-3">
<!-- Brand + live system status -->
<div class="flex items-center gap-4">
<a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Console</a>
<span class="inline-flex items-center gap-2 rounded-full bg-[var(--ws-color-success-soft)] px-3 py-1 text-xs font-medium text-[var(--ws-navbar-text)]">
<span class="h-2 w-2 rounded-full bg-[var(--ws-color-success)]" aria-hidden="true"></span>
All systems operational
</span>
</div>
<!-- Live metrics -->
<dl class="flex items-center gap-x-6 text-sm">
<div class="flex items-center gap-2">
<dt class="text-[var(--ws-navbar-text-muted)]">Projects</dt>
<dd class="font-semibold text-[var(--ws-navbar-text)]">24</dd>
</div>
<div class="flex items-center gap-2">
<dt class="text-[var(--ws-navbar-text-muted)]">Open tickets</dt>
<dd class="font-semibold text-[var(--ws-navbar-text)]">3</dd>
</div>
<div class="hidden items-center gap-2 sm:flex">
<dt class="text-[var(--ws-navbar-text-muted)]">Build</dt>
<dd class="font-semibold text-[var(--ws-navbar-text)]">#1482 passing</dd>
</div>
</dl>
<!-- Actions -->
<div class="ml-auto flex items-center gap-3">
<button type="button" aria-label="Notifications (2 unread)" class="relative flex h-9 w-9 items-center justify-center rounded-md text-[var(--ws-navbar-text-muted)] transition hover:bg-[var(--ws-navbar-hover-bg)] hover:text-[var(--ws-navbar-text)]">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1h6z"/></svg>
<span class="absolute right-1.5 top-1.5 h-2 w-2 rounded-full bg-[var(--ws-color-danger)]" aria-hidden="true"></span>
</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
navbarstatusdashboardoperationsconsolelive
Slots
| Name | Required | Description |
|---|---|---|
| status | Yes | System health badge with indicator dot. |
| metrics | Yes | Live key-value metrics list. |
| actions | No | Notifications and account controls. |
Status header in the Navbar family. Merges navigation with live operational data — system health, project counts, build state — for consoles and dashboards where the header is also an at-a-glance status panel.