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 &ndash; 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

Family

report-header

Tier

enhanced

Kind

section

Extends

report-header/base

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.