Mega Menu
Large dropdown panels with grid sections, featured items, and promo cards. Uses native <details> for zero-JS operation.
Basic Mega Menu (No JavaScript)
Preview
Products
New Feature!
Check out our latest AI integrations.
<details class="mega-menu">
<summary class="mega-menu-trigger">
Products
<svg class="mega-menu-trigger-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</summary>
<div class="mega-menu-panel">
<div class="mega-menu-content">
<div class="mega-menu-grid mega-menu-grid-3">
<div class="mega-menu-section">
<div class="mega-menu-section-title">Platform</div>
<div class="mega-menu-section-list">
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Dashboard</div>
<div class="mega-menu-item-desc">Analytics overview</div>
</div>
</a>
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
</div>
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Editor</div>
<div class="mega-menu-item-desc">Content management</div>
</div>
</a>
</div>
</div>
<div class="mega-menu-section">
<div class="mega-menu-section-title">Resources</div>
<div class="mega-menu-section-list">
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Documentation</div>
<div class="mega-menu-item-desc">Start building</div>
</div>
</a>
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">API Reference</div>
<div class="mega-menu-item-desc">Endpoints & SDKs</div>
</div>
</a>
</div>
</div>
<div class="mega-menu-section">
<div class="mega-menu-promo">
<div class="mega-menu-promo-title">New Feature!</div>
<div class="mega-menu-promo-desc">Check out our latest AI integrations.</div>
</div>
</div>
</div>
</div>
<div class="mega-menu-footer">
<a href="#" class="mega-menu-footer-link">
View all products
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</details>Requires: ux.min.css
<details class="relative inline-flex">
<summary class="inline-flex items-center gap-1 font-medium bg-transparent border-none cursor-pointer px-4 py-2 list-none hover:text-primary" style="list-style: none;">
Products
<svg class="w-4 h-4 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</summary>
<div class="absolute top-full left-0 z-100 min-w-150 max-w-[calc(100vw-2rem)] bg-base-100 border border-base-300 rounded-box shadow-xl overflow-hidden">
<div class="p-4">
<div class="grid grid-cols-3 gap-6">
<div class="flex flex-col">
<div class="text-xs font-semibold uppercase tracking-wider text-base-content/40 mb-2 px-2">Platform</div>
<div class="flex flex-col">
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<svg class="shrink-0 w-5 h-5 text-base-content/60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
<div>
<div class="font-medium">Dashboard</div>
<div class="text-sm text-base-content/60">Analytics overview</div>
</div>
</a>
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<svg class="shrink-0 w-5 h-5 text-base-content/60" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
<div>
<div class="font-medium">Editor</div>
<div class="text-sm text-base-content/60">Content management</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col">
<div class="text-xs font-semibold uppercase tracking-wider text-base-content/40 mb-2 px-2">Resources</div>
<div class="flex flex-col">
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div>
<div class="font-medium">Documentation</div>
<div class="text-sm text-base-content/60">Start building</div>
</div>
</a>
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div>
<div class="font-medium">API Reference</div>
<div class="text-sm text-base-content/60">Endpoints & SDKs</div>
</div>
</a>
</div>
</div>
<div class="flex flex-col">
<div class="flex flex-col gap-2 text-white p-4 rounded-field" style="background: linear-gradient(135deg, var(--color-primary), color-mix(in oklch, var(--color-primary) 80%, black));">
<div class="font-semibold">New Feature!</div>
<div class="text-sm opacity-90">Check out our latest AI integrations.</div>
</div>
</div>
</div>
</div>
<div class="flex items-center justify-between px-4 py-2 border-t border-base-300 bg-base-200">
<a href="#" class="inline-flex items-center gap-1 text-sm text-primary no-underline hover:underline">
View all products
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
</a>
</div>
</div>
</details>Requires: tw.min.css
// No JavaScript required — uses native <details> element
// Optionally close when clicking outside:
document.addEventListener('click', (e) => {
document.querySelectorAll('details.mega-menu[open]').forEach(d => {
if (!d.contains(e.target)) d.removeAttribute('open');
});
});With Header
Preview
Solutions
Our Solutions
By Industry
By Size
<details class="mega-menu">
<summary class="mega-menu-trigger">
Solutions
<svg class="mega-menu-trigger-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</summary>
<div class="mega-menu-panel">
<div class="mega-menu-header">
<div class="mega-menu-header-title">Our Solutions</div>
</div>
<div class="mega-menu-content">
<div class="mega-menu-grid mega-menu-grid-2">
<div class="mega-menu-section">
<div class="mega-menu-section-title">By Industry</div>
<div class="mega-menu-section-list">
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Healthcare</div>
</div>
</a>
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Finance</div>
</div>
</a>
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Retail</div>
</div>
</a>
</div>
</div>
<div class="mega-menu-section">
<div class="mega-menu-section-title">By Size</div>
<div class="mega-menu-section-list">
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Startup</div>
</div>
</a>
<a href="#" class="mega-menu-item">
<div class="mega-menu-item-content">
<div class="mega-menu-item-title">Enterprise</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</details>Requires: ux.min.css
<details class="relative inline-flex">
<summary class="inline-flex items-center gap-1 font-medium bg-transparent border-none cursor-pointer px-4 py-2 list-none hover:text-primary" style="list-style: none;">
Solutions
<svg class="w-4 h-4 transition-transform" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</summary>
<div class="absolute top-full left-0 z-100 min-w-150 max-w-[calc(100vw-2rem)] bg-base-100 border border-base-300 rounded-box shadow-xl overflow-hidden">
<div class="flex items-center justify-between p-4 border-b border-base-300 bg-base-200">
<div class="text-lg font-semibold">Our Solutions</div>
</div>
<div class="p-4">
<div class="grid grid-cols-2 gap-6">
<div class="flex flex-col">
<div class="text-xs font-semibold uppercase tracking-wider text-base-content/40 mb-2 px-2">By Industry</div>
<div class="flex flex-col">
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div class="font-medium">Healthcare</div>
</a>
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div class="font-medium">Finance</div>
</a>
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div class="font-medium">Retail</div>
</a>
</div>
</div>
<div class="flex flex-col">
<div class="text-xs font-semibold uppercase tracking-wider text-base-content/40 mb-2 px-2">By Size</div>
<div class="flex flex-col">
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div class="font-medium">Startup</div>
</a>
<a href="#" class="flex items-start gap-2 no-underline p-2 rounded-field text-base-content hover:bg-base-200">
<div class="font-medium">Enterprise</div>
</a>
</div>
</div>
</div>
</div>
</div>
</details>Requires: tw.min.css
// No JavaScript required