navbar tabs header app sections folders tabs folder sections app navigation header tab style navigation header folder tab navigation
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
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.