Navbar Magazine

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

magazine.html

<header class="ws-navbar border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]">
  <div class="mx-auto max-w-6xl px-6">
    <!-- Utility row -->
    <div class="flex items-center justify-between border-b border-[var(--ws-navbar-border)] py-2 text-xs text-[var(--ws-navbar-text-muted)]">
      <p>Friday, June 13, 2026</p>
      <div class="flex items-center gap-4">
        <a href="#newsletter" class="transition hover:text-[var(--ws-navbar-text)]">Newsletter</a>
        <a href="#subscribe" class="font-semibold text-[var(--ws-navbar-active)] transition hover:opacity-80">Subscribe</a>
      </div>
    </div>
    <!-- Masthead -->
    <div class="py-7 text-center">
      <a href="#" class="font-serif text-4xl font-bold tracking-tight text-[var(--ws-navbar-text)] sm:text-5xl">The Dispatch</a>
      <p class="mt-2 text-xs uppercase tracking-[0.25em] text-[var(--ws-navbar-text-muted)]">Independent reporting since 2009</p>
    </div>
  </div>
  <!-- Section navigation -->
  <nav aria-label="Sections" class="border-t border-[var(--ws-navbar-border)]">
    <ul class="mx-auto flex max-w-6xl flex-wrap items-center justify-center gap-x-7 gap-y-2 px-6 py-3 text-sm font-medium">
      <li><a href="#world" class="text-[var(--ws-navbar-text)] transition hover:text-[var(--ws-navbar-active)]">World</a></li>
      <li><a href="#politics" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Politics</a></li>
      <li><a href="#business" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Business</a></li>
      <li><a href="#culture" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Culture</a></li>
      <li><a href="#science" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Science</a></li>
      <li><a href="#opinion" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Opinion</a></li>
    </ul>
  </nav>
</header>

Details

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navbarheadermagazineeditorialmastheadnewspaper

Slots

Name	Required	Description
utility	No	Thin top row with date and subscribe link.
masthead	Yes	Large centered wordmark and tagline.
sections	Yes	Centered section navigation links.

Editorial masthead header in the Navbar family. Leads with a large serif wordmark and a tagline, with section navigation placed below — a deliberate alternative to the logo-left / nav-right SaaS default.