mega-menu navigation bento grid dropdown boxes categories bento mega-menu grid navigation boxes categories disclosure-arrow bento grid mega menu navigation compartmentalized dropdown menu with boxes mega menu with category cards and icons
Bento Box Mega Menu
Fetch pattern JSON:
curl https://webspire.de/patterns/mega-menu/bento.json bento.html
<nav class="ws-mega-menu border-b border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-bg)]" aria-label="Bento box navigation menu">
<div class="mx-auto max-w-7xl px-6 py-5">
<div class="grid grid-cols-12 gap-3">
<!-- Large box: Products (6 items, 2-col grid) -->
<div class="group col-span-12 rounded-2xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-hover-bg)] p-5 transition-colors hover:border-[var(--ws-mega-menu-accent)] sm:col-span-5">
<a href="#" class="mb-4 flex items-center gap-2 text-[var(--ws-mega-menu-text)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">
<span class="rounded-lg bg-[var(--ws-mega-menu-icon-bg)] p-1.5">
<svg class="size-4 text-[var(--ws-mega-menu-accent)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" />
</svg>
</span>
<span class="text-sm font-semibold">Products</span>
<svg class="ml-auto size-3.5 -translate-x-1 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" xmlns="http://www.w3.org/2000/svg" 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>
<ul class="grid grid-cols-2 gap-x-4 gap-y-2.5" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Analytics</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Automation</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Commerce</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Integrations</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Security</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">API Platform</a></li>
</ul>
</div>
<!-- Small box: Solutions (4 items) -->
<div class="group col-span-12 rounded-2xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-hover-bg)] p-5 transition-colors hover:border-[var(--ws-mega-menu-accent)] sm:col-span-3">
<a href="#" class="mb-4 flex items-center gap-2 text-[var(--ws-mega-menu-text)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">
<span class="rounded-lg bg-[var(--ws-mega-menu-icon-bg)] p-1.5">
<svg class="size-4 text-[var(--ws-mega-menu-accent)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<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>
<span class="text-sm font-semibold">Solutions</span>
<svg class="ml-auto size-3.5 -translate-x-1 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" xmlns="http://www.w3.org/2000/svg" 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>
<ul class="space-y-2.5" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">For Startups</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">For Enterprise</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">For Agencies</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">For E-Commerce</a></li>
</ul>
</div>
<!-- Medium box: Resources (5 items) -->
<div class="group col-span-12 rounded-2xl border border-[var(--ws-mega-menu-border)] bg-[var(--ws-mega-menu-hover-bg)] p-5 transition-colors hover:border-[var(--ws-mega-menu-accent)] sm:col-span-4">
<a href="#" class="mb-4 flex items-center gap-2 text-[var(--ws-mega-menu-text)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">
<span class="rounded-lg bg-[var(--ws-mega-menu-icon-bg)] p-1.5">
<svg class="size-4 text-[var(--ws-mega-menu-accent)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
</svg>
</span>
<span class="text-sm font-semibold">Resources</span>
<svg class="ml-auto size-3.5 -translate-x-1 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100" xmlns="http://www.w3.org/2000/svg" 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>
<ul class="space-y-2.5" role="list">
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Documentation</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Guides</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Blog</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Changelog</a></li>
<li><a href="#" class="text-sm text-[var(--ws-mega-menu-text-soft)] transition-colors hover:text-[var(--ws-mega-menu-accent)]">Status</a></li>
</ul>
</div>
</div>
</div>
</nav>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
mega-menunavigationbentogriddropdownboxescategories
Slots
| Name | Required | Description |
|---|---|---|
| boxes | Yes | Category boxes in the bento grid. Each box has a header link and an item list. |
Bento box mega menu with three compartmentalized boxes: a large Products box (6 items in a 2-column grid, col-span-5), a small Solutions box (4 items, col-span-3), and a medium Resources box (5 items, col-span-4). Each box header links to the category overview page — hovering a box reveals a disclosure arrow next to the label and highlights the border in the accent color. Items are plain text links. All effects are pure CSS via Tailwind group/group-hover — no JavaScript required for the hover states.