Navbar Floating

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

floating.html

<div class="px-4 pt-4">
  <header class="ws-navbar sticky top-4 z-50 mx-auto max-w-5xl rounded-2xl border border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]/80 shadow-lg shadow-black/5 backdrop-blur-md">
    <div class="flex items-center justify-between px-5 py-3">
      <a href="#" class="flex items-center gap-2 text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">
        <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--ws-navbar-active)] text-white">
          <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2l2.4 7.2H22l-6 4.4 2.3 7.2L12 16.6 5.7 20.8 8 13.6 2 9.2h7.6z"/></svg>
        </span>
        Lumen
      </a>
      <nav aria-label="Primary" class="hidden items-center gap-7 md:flex">
        <a href="#features" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Features</a>
        <a href="#pricing" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Pricing</a>
        <a href="#about" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">About</a>
      </nav>
      <a href="#start" class="rounded-full bg-[var(--ws-navbar-active)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90">Get started</a>
    </div>
  </header>
  <!-- Demo backdrop so the floating effect is visible -->
  <div class="mx-auto mt-4 h-24 max-w-5xl rounded-xl bg-gradient-to-br from-[var(--ws-color-surface-alt)] to-[var(--ws-color-surface-muted)]" aria-hidden="true"></div>
</div>

Details

Family

navbar

Tier

enhanced

Kind

section

Extends

navbar/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

navbarfloatingglassglassmorphismcardmodern

Slots

Name	Required	Description
brand	Yes	Logo mark and name.
links	Yes	Primary navigation links.
cta	No	Primary call-to-action button.

Floating header in the Navbar family. A detached, translucent card with backdrop blur and a soft shadow — a modern reinterpretation of the floating header trend, kept token-driven for light and dark mode.