mega-menu navigation dropdown multi-column links mega-menu dropdown navigation columns links multi-column mega menu navigation full-width dropdown with link categories
Mega Menu Base
Fetch pattern JSON:
curl https://webspire.de/patterns/mega-menu/base.json base.html
<nav class="ws-mega-menu border-b border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-bg)]" aria-label="Mega menu">
<div class="mx-auto max-w-7xl px-6">
<div class="grid grid-cols-2 gap-8 py-8 lg:grid-cols-4">
<!-- Products -->
<div>
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Products</h3>
<ul class="mt-4 space-y-3" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Analytics</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Automation</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Commerce</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Integrations</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Security</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">API Platform</a></li>
</ul>
</div>
<!-- Solutions -->
<div>
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Solutions</h3>
<ul class="mt-4 space-y-3" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Startups</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Enterprise</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For Agencies</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">For E-Commerce</a></li>
</ul>
</div>
<!-- Resources -->
<div>
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Resources</h3>
<ul class="mt-4 space-y-3" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Documentation</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Guides</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Blog</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Changelog</a></li>
</ul>
</div>
<!-- Company -->
<div>
<h3 class="text-xs font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Company</h3>
<ul class="mt-4 space-y-3" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">About</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Careers</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
mega-menunavigationdropdownmulti-columnlinks
Slots
| Name | Required | Description |
|---|---|---|
| columns | Yes | Link group columns with headings. |
Base mega menu with four link columns: Products (6 links), Solutions (4 links), Resources (4 links), and Company (3 links). Designed to sit below a navbar trigger. Wire up show/hide via JS or CSS hover states.