Navbar Two-Tier

Fetch pattern JSON: curl https://webspire.de/patterns/navbar/two-tier.json

two-tier.html

<header class="ws-navbar sticky top-0 z-50 bg-[var(--ws-navbar-bg)]">
  <!-- Utility tier -->
  <div class="border-b border-[var(--ws-navbar-border)] bg-[var(--ws-color-surface-alt)]">
    <div class="mx-auto flex max-w-7xl items-center justify-end gap-5 px-6 py-1.5 text-xs">
      <a href="#contact" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Contact</a>
      <a href="#support" class="text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Support</a>
      <span class="h-3 w-px bg-[var(--ws-navbar-border)]" aria-hidden="true"></span>
      <a href="#language" class="flex items-center gap-1 text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">
        <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m4 13l4-9 4 9M5 9c0 6 6 9 6 9"/></svg>
        EN
      </a>
      <a href="#login" class="font-medium text-[var(--ws-navbar-text)] transition hover:text-[var(--ws-navbar-active)]">Sign in</a>
    </div>
  </div>
  <!-- Primary tier -->
  <div class="border-b border-[var(--ws-navbar-border)]">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
      <a href="#" class="text-lg font-bold tracking-tight text-[var(--ws-navbar-text)]">Meridian</a>
      <nav aria-label="Primary" class="hidden items-center gap-8 md:flex">
        <a href="#solutions" class="text-sm font-medium text-[var(--ws-navbar-text)] transition hover:text-[var(--ws-navbar-active)]">Solutions</a>
        <a href="#industries" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Industries</a>
        <a href="#resources" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Resources</a>
        <a href="#company" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Company</a>
      </nav>
      <a href="#demo" class="rounded-lg bg-[var(--ws-navbar-active)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90">Request demo</a>
    </div>
  </div>
</header>

Details

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navbarheadertwo-tierutilityenterpriseinstitutional

Slots

Name	Required	Description
utility	Yes	Slim top tier with contact, language, and account links.
brand	Yes	Logo in the primary tier.
links	Yes	Primary navigation links.
cta	No	Primary call-to-action button.

Two-tier header in the Navbar family. Splits utility links into a slim top row and keeps the main nav and CTA below — a structured, institutional alternative to the single-row SaaS header.