mega-menu products solutions navigation cards featured panel enterprise mega-menu products dropdown cards icons featured panel navigation enterprise mega menu with product cards and icons navigation dropdown with icon product list mega menu with featured announcement panel
Mega Menu Product Cards
Fetch pattern JSON:
curl https://webspire.de/patterns/mega-menu/product-cards.json product-cards.html
<nav class="ws-mega-menu border-b border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-bg)] shadow-xl" aria-label="Products mega-menu">
<div class="mx-auto max-w-7xl px-6 py-8">
<div class="grid gap-x-10 gap-y-8 lg:grid-cols-[1fr_1fr_280px]">
<!-- Column 1: Products (as cards) -->
<div>
<p class="mb-4 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Products</p>
<ul class="space-y-1" role="list">
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Le Chat</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">AI assistant for individuals and teams</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">La Plateforme</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">API access to frontier models</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Mistral Vibe</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">AI coding assistant for developers</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 0 0 4.5 4.5H18a3.75 3.75 0 0 0 1.332-7.257 3 3 0 0 0-3.758-3.848 5.25 5.25 0 0 0-10.233 2.33A4.502 4.502 0 0 0 2.25 15Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Mistral Compute</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">GPU cloud for AI workloads</p>
</div>
</a>
</li>
</ul>
</div>
<!-- Column 2: Solutions (by vertical) -->
<div>
<p class="mb-4 text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Solutions</p>
<ul class="space-y-1" role="list">
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Autonomous AI Agents</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">Agentic workflows with tool use and RAG</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Sovereign Deployment</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">On-premise and private cloud for regulated industries</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.091Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Custom Fine-tuning</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">Train on proprietary data for domain-specific tasks</p>
</div>
</a>
</li>
<li>
<a href="#" class="group flex items-start gap-3.5 rounded-xl p-3 transition hover:bg-[var(--ws-mega-menu-hover-bg)]">
<span class="mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[var(--ws-mega-menu-icon-bg)]">
<svg class="h-4 w-4 text-[var(--ws-mega-menu-accent)]" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
</span>
<div>
<p class="text-sm font-semibold text-[var(--ws-mega-menu-text)]">Applied AI Services</p>
<p class="mt-0.5 text-xs text-[var(--ws-mega-menu-text-soft)]">Industry-specific solutions with expert support</p>
</div>
</a>
</li>
</ul>
</div>
<!-- Column 3: Featured / CTA panel -->
<div class="rounded-2xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-hover-bg)] p-6">
<p class="text-[11px] font-semibold uppercase tracking-wider text-[var(--ws-mega-menu-text-soft)]">Featured</p>
<div class="mt-4 aspect-video overflow-hidden rounded-xl bg-gradient-to-br from-slate-700 to-slate-900">
<div class="flex h-full items-center justify-center">
<span class="text-xs text-white/30">Cover image</span>
</div>
</div>
<h3 class="mt-4 text-sm font-semibold text-[var(--ws-mega-menu-text)]">Magistral Medium 1.2 — now available</h3>
<p class="mt-1.5 text-xs text-[var(--ws-mega-menu-text-soft)]">State-of-the-art reasoning for enterprise AI workloads.</p>
<a href="#" class="mt-4 inline-flex items-center gap-1.5 text-xs font-semibold text-[var(--ws-mega-menu-accent)] hover:underline">
Read announcement
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"/></svg>
</a>
</div>
</div>
</div>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
mega-menuproductssolutionsnavigationcardsfeaturedpanelenterprise
Slots
| Name | Required | Description |
|---|---|---|
| products | Yes | Left column — product cards with icon box, name, and one-line description. |
| solutions | No | Middle column — solution/use-case cards with icon box, name, and description. |
| featured | No | Right panel — featured article or announcement with cover image, title, and CTA link. |
Three-column mega-menu dropdown. Left and middle columns show product/solution cards: icon box (square, 36px, rounded-lg) + product name (semibold) + one-line description (xs, muted). Right column is a featured panel with a cover image, headline, and arrow link. Cards get a subtle background on hover. Designed to be used inside a disclosure/popover component triggered by a nav item click or hover.