mega-menu navigation featured promotion dropdown mega-menu featured promotion card navigation mega menu with promotional card dropdown navigation with featured content
Mega Menu With Featured
Fetch pattern JSON:
curl https://webspire.de/patterns/mega-menu/with-featured.json with-featured.html
<nav class="ws-mega-menu border-b border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-bg)]" aria-label="Mega menu with featured content">
<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>
</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>
</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)]">API Reference</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text)] transition hover:text-[var(--ws-mega-menu-accent)]">Community</a></li>
</ul>
</div>
<!-- Featured card -->
<div class="rounded-xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-accent)]/5 p-4">
<div class="flex aspect-[16/9] w-full items-center justify-center rounded-lg bg-gradient-to-br from-indigo-100 to-indigo-200 dark:from-indigo-900 dark:to-indigo-800" aria-label="Featured content image">
<svg class="h-8 w-8 text-indigo-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z"/></svg>
</div>
<p class="mt-3 text-sm font-semibold text-[var(--ws-mega-menu-text)]">What's New in v3.0</p>
<p class="mt-1 text-xs text-[var(--ws-mega-menu-text-soft)]">Explore the latest features including AI-powered analytics and real-time collaboration.</p>
<a href="#" class="mt-3 inline-flex text-sm font-medium text-[var(--ws-mega-menu-accent)] transition hover:opacity-80">Learn more →</a>
</div>
</div>
</div>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
mega-menunavigationfeaturedpromotiondropdown
Slots
| Name | Required | Description |
|---|---|---|
| columns | Yes | Link group columns with headings. |
| featured | Yes | Featured content card with image, title, description, and link. |
Enhanced mega menu with three link columns plus a featured content card. The card includes an image placeholder, title, description, and a “Learn more” link. Ideal for highlighting new features or promotions.