Mega menu
A mega menu turns a plain navigation link into an overview of what a site offers. Related pages sit together in groups users can scan at a glance, short descriptions give each link context before anyone clicks, and the extra space can spotlight whatever deserves attention, from a product launch to fresh content. Mega menus show up in the headers of marketing sites, docs hubs, and online stores, anywhere a product has more to show than a row of links can carry.
<button type="button" id="mega-menu-trigger" class="group btn btn-ghost btn-sm">
Resources<svg
class="size-3 text-muted-foreground transition-transform group-aria-expanded:rotate-180"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="m6 9 6 6 6-6"></path>
</svg>
</button>
<div
class="popover w-160 max-w-[calc(100vw-2rem)] gap-0 overflow-clip p-0 md:flex-row"
data-sp-toggle="#mega-menu-trigger"
data-sp-mode="hover"
data-sp-placement="bottom"
>
<div class="flex flex-1 flex-col gap-0.5 p-3">
<a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 7v14"></path>
<path
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
></path>
</svg>
</div>
<div class="item-content">
<div class="item-title">
Blog<span class="badge badge-secondary">New</span>
</div>
<div class="item-description">
The latest industry news and guides curated by our expert team.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"
></path>
<path d="M20 2v4"></path>
<path d="M22 4h-4"></path>
<circle cx="4" cy="20" r="2"></circle>
</svg>
</div>
<div class="item-content">
<div class="item-title">Customer stories</div>
<div class="item-description">
Learn how teams use Acme to move faster with fewer tools.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M9 9.003a1 1 0 0 1 1.517-.859l4.997 2.997a1 1 0 0 1 0 1.718l-4.997 2.997A1 1 0 0 1 9 14.996z"
></path>
<circle cx="12" cy="12" r="10"></circle>
</svg>
</div>
<div class="item-content">
<div class="item-title">Video tutorials</div>
<div class="item-description">
Get up and running on our newest features and in-depth guides.
</div>
</div></a
><a class="item item-xs" href="#"
><div class="item-media item-media-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M12 7v14"></path>
<path d="M16 12h2"></path>
<path d="M16 8h2"></path>
<path
d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
></path>
<path d="M6 12h2"></path>
<path d="M6 8h2"></path>
</svg>
</div>
<div class="item-content">
<div class="item-title">Documentation</div>
<div class="item-description">
In-depth articles on our tools and technologies to empower teams.
</div>
</div></a
>
</div>
<div
class="flex w-full shrink-0 flex-col gap-3 border-s bg-muted/40 p-4 md:w-75"
>
<img
src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=640&h=427&fit=crop&auto=format&q=100"
alt="Tidy workspace with a laptop"
class="h-37 w-full rounded-lg border object-cover"
/>
<div class="flex flex-col gap-1">
<span class="text-sm font-medium"
>We've just released an update!</span
><span class="text-xs text-muted-foreground"
>A redesigned dashboard, faster search, and a stack of smaller fixes
just landed.</span
>
</div>
<div class="flex items-center gap-4">
<a
class="text-xs font-medium text-muted-foreground hover:text-foreground"
href="#"
>Dismiss</a
><a class="text-xs font-medium hover:text-muted-foreground" href="#"
>Changelog</a
>
</div>
</div>
</div>Browse more dropdown examples.