Navbar Tabs

Fetch pattern JSON: curl https://webspire.de/patterns/navbar/tabs.json

tabs.html

<header class="ws-navbar bg-[var(--ws-color-surface-alt)]">
  <div class="mx-auto max-w-7xl px-6">
    <!-- Brand row -->
    <div class="flex items-center justify-between pt-3">
      <a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Workbench</a>
      <button type="button" aria-label="Account" class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-navbar-hover-bg)] text-xs font-semibold text-[var(--ws-navbar-text)]">JS</button>
    </div>
    <!-- Tab navigation -->
    <nav aria-label="Sections" class="-mb-px mt-3 flex gap-1">
      <a href="#overview" aria-current="page" class="rounded-t-lg border border-[var(--ws-navbar-border)] border-b-[var(--ws-navbar-bg)] bg-[var(--ws-navbar-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-navbar-text)]">Overview</a>
      <a href="#projects" class="border-b border-transparent px-4 py-2.5 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Projects</a>
      <a href="#reports" class="border-b border-transparent px-4 py-2.5 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Reports</a>
      <a href="#team" class="border-b border-transparent px-4 py-2.5 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Team</a>
      <a href="#settings" class="border-b border-transparent px-4 py-2.5 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Settings</a>
    </nav>
  </div>
  <div class="border-b border-[var(--ws-navbar-border)]" aria-hidden="true"></div>
</header>

Details

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navbartabsheaderappsectionsfolders

Slots

Name	Required	Description
brand	Yes	Logo and account control row.
tabs	Yes	Tab-style section navigation links.

Tab-style header in the Navbar family. Renders navigation as folder tabs with the active section connected to the content area — a desktop-app idiom that AI generators rarely produce for marketing or app headers.