navbar mega-menu dropdown navigation header navbar mega dropdown menu navigation header products navigation with mega dropdown header with product menu
Navbar Mega Menu
Fetch pattern JSON:
curl https://webspire.de/patterns/navbar/mega.json mega.html
<header class="ws-navbar sticky top-0 z-50 border-b border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)]/90 backdrop-blur">
<div class="mx-auto max-w-7xl px-6">
<div class="flex items-center justify-between py-4">
<a href="#" class="text-base font-semibold tracking-tight text-[var(--ws-navbar-text)]">Webspire</a>
<nav aria-label="Primary" class="hidden items-center gap-8 lg:flex">
<!-- Mega menu trigger -->
<div class="group relative">
<button type="button" class="flex items-center gap-1 text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">
Products
<svg class="h-4 w-4 transition group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/></svg>
</button>
<!-- Mega dropdown -->
<div class="invisible absolute left-1/2 top-full z-50 w-[40rem] -translate-x-1/2 pt-4 opacity-0 transition-all duration-200 group-hover:visible group-hover:opacity-100">
<div class="overflow-hidden rounded-2xl border border-[var(--ws-navbar-border)] bg-[var(--ws-navbar-bg)] shadow-xl">
<div class="grid grid-cols-2 gap-px bg-[var(--ws-navbar-border)]">
<a href="#" class="group/item flex gap-4 bg-[var(--ws-navbar-bg)] p-5 transition hover:bg-[var(--ws-navbar-hover-bg)]">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-navbar-text)]">Patterns</p>
<p class="mt-0.5 text-xs text-[var(--ws-navbar-text-muted)]">Copy-paste UI sections</p>
</div>
</a>
<a href="#" class="group/item flex gap-4 bg-[var(--ws-navbar-bg)] p-5 transition hover:bg-[var(--ws-navbar-hover-bg)]">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-navbar-text)]">CSS Effects</p>
<p class="mt-0.5 text-xs text-[var(--ws-navbar-text-muted)]">Glass, animations, scroll</p>
</div>
</a>
<a href="#" class="group/item flex gap-4 bg-[var(--ws-navbar-bg)] p-5 transition hover:bg-[var(--ws-navbar-hover-bg)]">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 7.5l3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0021 18V6a2.25 2.25 0 00-2.25-2.25H5.25A2.25 2.25 0 003 6v12a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-navbar-text)]">CLI</p>
<p class="mt-0.5 text-xs text-[var(--ws-navbar-text-muted)]">Add patterns via terminal</p>
</div>
</a>
<a href="#" class="group/item flex gap-4 bg-[var(--ws-navbar-bg)] p-5 transition hover:bg-[var(--ws-navbar-hover-bg)]">
<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-violet-100 text-violet-600">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
</div>
<div>
<p class="text-sm font-semibold text-[var(--ws-navbar-text)]">API</p>
<p class="mt-0.5 text-xs text-[var(--ws-navbar-text-muted)]">JSON registry endpoints</p>
</div>
</a>
</div>
<div class="bg-[var(--ws-navbar-hover-bg)] px-5 py-4">
<a href="#" class="flex items-center gap-2 text-sm font-medium text-[var(--ws-navbar-active)] hover:opacity-80">
View all products
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</div>
</div>
</div>
<a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Pricing</a>
<a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Docs</a>
<a href="#" class="text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)]">Blog</a>
</nav>
<div class="flex items-center gap-3">
<a href="#" class="hidden text-sm font-medium text-[var(--ws-navbar-text-muted)] transition hover:text-[var(--ws-navbar-text)] sm:inline">Sign in</a>
<a href="#" class="rounded-lg bg-[var(--ws-navbar-active)] px-4 py-2 text-sm font-semibold text-white transition hover:opacity-90">Get started</a>
</div>
</div>
</div>
</header>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
navbarmega-menudropdownnavigationheader
Slots
| Name | Required | Description |
|---|---|---|
| logo | Yes | Brand logo or name. |
| nav | Yes | Navigation links with mega dropdown trigger. |
| mega | Yes | Mega dropdown with icon cards and footer link. |
| actions | No | Sign in and CTA buttons. |
Sticky navbar with a CSS-only mega dropdown. Hovering “Products” reveals a 2x2 grid of icon cards with title and description, plus a footer link. Dropdown uses group-hover for pure CSS interaction. Backdrop-blur on scroll. Hidden on mobile.