report header tabs navigation analytics sections report header tabs navigation overview revenue users conversions report header with tab navigation analytics header with section tabs
Report Header With Tabs
Fetch pattern JSON:
curl https://webspire.de/patterns/report-header/with-tabs.json with-tabs.html
<header class="ws-report-header-tabs" style="--ws-report-header-bg: var(--ws-color-surface); --ws-report-header-text: var(--ws-color-text); --ws-report-header-text-soft: var(--ws-color-text-soft); --ws-report-header-border: var(--ws-color-border); --ws-report-header-accent: var(--ws-color-primary);">
<div class="mx-auto max-w-5xl px-4 pt-8 sm:px-6 lg:px-8">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<h1 class="text-2xl font-bold tracking-tight text-[var(--ws-report-header-text)]">Analytics Overview</h1>
<p class="mt-1 text-sm text-[var(--ws-report-header-text-soft)]">Track your key metrics and performance indicators.</p>
</div>
<div class="flex items-center gap-2 rounded-lg border border-[var(--ws-report-header-border)] bg-[var(--ws-report-header-bg)] px-4 py-2 text-sm text-[var(--ws-report-header-text)]">
<svg class="h-4 w-4 shrink-0 text-[var(--ws-report-header-text-soft)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
<span>Mar 1 – Mar 21, 2026</span>
</div>
</div>
<!-- Tab bar -->
<nav class="mt-6 border-b border-[var(--ws-report-header-border)]" aria-label="Report sections">
<ul class="-mb-px flex gap-6" role="tablist">
<li role="presentation">
<a href="#overview" role="tab" aria-selected="true" class="inline-block border-b-2 border-[var(--ws-report-header-accent)] pb-3 text-sm font-medium text-[var(--ws-report-header-accent)]">Overview</a>
</li>
<li role="presentation">
<a href="#revenue" role="tab" aria-selected="false" class="inline-block border-b-2 border-transparent pb-3 text-sm font-medium text-[var(--ws-report-header-text-soft)] hover:border-[var(--ws-report-header-border)] hover:text-[var(--ws-report-header-text)]">Revenue</a>
</li>
<li role="presentation">
<a href="#users" role="tab" aria-selected="false" class="inline-block border-b-2 border-transparent pb-3 text-sm font-medium text-[var(--ws-report-header-text-soft)] hover:border-[var(--ws-report-header-border)] hover:text-[var(--ws-report-header-text)]">Users</a>
</li>
<li role="presentation">
<a href="#conversions" role="tab" aria-selected="false" class="inline-block border-b-2 border-transparent pb-3 text-sm font-medium text-[var(--ws-report-header-text-soft)] hover:border-[var(--ws-report-header-border)] hover:text-[var(--ws-report-header-text)]">Conversions</a>
</li>
</ul>
</nav>
</div>
</header>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
reportheadertabsnavigationanalyticssections
Slots
| Name | Required | Description |
|---|---|---|
| title | Yes | Report title and subtitle. |
| dateRange | Yes | Date range display with calendar icon. |
| tabs | Yes | Tab navigation bar with section links. |
Extends the base report header with a tab bar below. Four tabs (Overview, Revenue, Users, Conversions) with the first tab active using accent color and bottom border. Tabs use proper ARIA roles.