Tailwind CSS Multi-Column Mega Menu Navigation Component
- Category Components
- Type HTML
- Platform Cross-platform
- Language HTML,CSS,JavaScript
- Price Free
- Download 746
- Comments 0
Free Tailwind CSS Multi-Column Mega Menu Navigation Component HTML Download
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Column Mega Menu Navigation — Clayi Assets</title>
<meta name="description" content="Tailwind CSS multi-column mega menu with category columns, featured cards, and hover animations.">
<script src="https://cdn.tailwindcss.com"></script>
<style>
body { font-family: system-ui, sans-serif; }
.glass { background: rgba(15,23,42,.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
/* Mega menu: hidden by default, shown with .open class */
#mega-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
width: 680px;
z-index: 200;
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
transform: translateX(-50%) translateY(-6px);
}
#mega-menu.open {
display: block;
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* small bridge to prevent gap between button and menu */
#mega-menu::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 12px;
}
</style>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen">
<header class="glass sticky top-0 z-50 border-b border-slate-800">
<div class="max-w-7xl mx-auto px-6 flex items-center gap-8 h-16">
<!-- Logo -->
<a href="#" class="font-bold text-white text-lg flex items-center gap-2">
<span class="w-7 h-7 bg-violet-600 rounded-md flex items-center justify-center text-xs font-black">M</span>
MegaNav
</a>
<nav class="hidden md:flex items-center gap-2">
<!-- Products with mega menu -->
<div class="relative" id="mega-wrapper">
<button id="mega-btn"
class="flex items-center gap-1 px-4 py-2 rounded-lg text-sm text-slate-300 hover:text-white hover:bg-slate-800 transition font-medium"
aria-haspopup="true" aria-expanded="false">
Products
<svg id="mega-arrow" class="w-4 h-4 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<!-- MEGA MENU PANEL -->
<div id="mega-menu" role="menu" class="glass rounded-2xl border border-slate-700 shadow-2xl shadow-black/60">
<div class="p-6 grid grid-cols-3 gap-6">
<!-- Column 1: Frontend -->
<div>
<p class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-3">Frontend</p>
<div class="flex flex-col gap-1">
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-sky-600/20 text-sky-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">⚛</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">React Kit</div>
<div class="text-xs text-slate-500">Component library</div>
</div>
</a>
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-emerald-600/20 text-emerald-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">💚</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">Vue Starter</div>
<div class="text-xs text-slate-500">Composition API</div>
</div>
</a>
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-orange-600/20 text-orange-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">🔥</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">Svelte Pack</div>
<div class="text-xs text-slate-500">SvelteKit templates</div>
</div>
</a>
</div>
</div>
<!-- Column 2: Backend -->
<div>
<p class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-3">Backend</p>
<div class="flex flex-col gap-1">
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-yellow-600/20 text-yellow-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">⚡</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">Node Scripts</div>
<div class="text-xs text-slate-500">Express & Fastify</div>
</div>
</a>
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-blue-600/20 text-blue-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">🐍</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">Python Utils</div>
<div class="text-xs text-slate-500">FastAPI boilerplates</div>
</div>
</a>
<a href="#" role="menuitem" class="flex items-center gap-3 p-2 rounded-lg hover:bg-slate-800 transition group/item">
<span class="w-8 h-8 bg-cyan-600/20 text-cyan-400 rounded-lg flex items-center justify-center text-base flex-shrink-0">🐳</span>
<div>
<div class="text-sm font-medium text-slate-200 group-hover/item:text-white">Docker Configs</div>
<div class="text-xs text-slate-500">Compose stacks</div>
</div>
</a>
</div>
</div>
<!-- Column 3: Featured -->
<div class="bg-gradient-to-br from-violet-600/20 to-sky-600/20 border border-violet-500/20 rounded-xl p-4">
<p class="text-xs font-bold uppercase tracking-widest text-violet-400 mb-3">Featured</p>
<a href="#" role="menuitem" class="block group/feat">
<div class="text-2xl mb-2">🚀</div>
<div class="text-sm font-bold text-white group-hover/feat:text-violet-300 transition">Full-Stack Starter Kit</div>
<div class="text-xs text-slate-400 mt-1 leading-relaxed">Next.js 14 + Tailwind + Prisma + Auth.js complete boilerplate.</div>
<div class="mt-3 text-xs font-semibold text-violet-400 flex items-center gap-1">
Get it free
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</div>
</a>
</div>
</div>
<!-- Footer row -->
<div class="border-t border-slate-800 px-6 py-3 flex items-center justify-between">
<span class="text-xs text-slate-500">Browse all 100+ free components</span>
<a href="#" class="text-xs font-semibold text-sky-400 hover:text-sky-300 transition flex items-center gap-1">
View all
<svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
</div>
</div>
</div>
<a href="#" class="px-4 py-2 rounded-lg text-sm text-slate-300 hover:text-white hover:bg-slate-800 transition">Docs</a>
<a href="#" class="px-4 py-2 rounded-lg text-sm text-slate-300 hover:text-white hover:bg-slate-800 transition">Pricing</a>
</nav>
<div class="ml-auto">
<a href="#" class="px-4 py-2 rounded-lg text-sm font-semibold bg-violet-600 hover:bg-violet-500 text-white transition">Sign Up Free</a>
</div>
</div>
</header>
<main class="pt-16 flex items-center justify-center min-h-[80vh]">
<div class="text-center space-y-4 px-6 max-w-lg mx-auto">
<span class="text-xs font-semibold tracking-widest text-violet-400 uppercase">Component #2</span>
<h1 class="text-4xl md:text-5xl font-black text-white">Multi-Column Mega Menu</h1>
<p class="text-slate-400">Click <strong class="text-white">"Products"</strong> in the navbar to open the mega menu. Click outside or press <kbd class="px-1.5 py-0.5 bg-slate-800 border border-slate-700 rounded text-xs font-mono">Esc</kbd> to close it.</p>
</div>
</main>
<script>
var btn = document.getElementById('mega-btn');
var menu = document.getElementById('mega-menu');
var arrow = document.getElementById('mega-arrow');
var isOpen = false;
function openMenu() {
isOpen = true;
menu.classList.add('open');
arrow.style.transform = 'rotate(180deg)';
btn.setAttribute('aria-expanded', 'true');
}
function closeMenu() {
isOpen = false;
menu.classList.remove('open');
arrow.style.transform = 'rotate(0deg)';
btn.setAttribute('aria-expanded', 'false');
}
// Toggle on button click
btn.addEventListener('click', function(e) {
e.stopPropagation();
if (isOpen) { closeMenu(); } else { openMenu(); }
});
// Close on outside click
document.addEventListener('click', function(e) {
if (isOpen && !document.getElementById('mega-wrapper').contains(e.target)) {
closeMenu();
}
});
// Close on Escape key
document.addEventListener('keydown', function(e) {
if (e.key === 'Escape' && isOpen) { closeMenu(); btn.focus(); }
});
// Prevent menu click from bubbling to document
menu.addEventListener('click', function(e) {
e.stopPropagation();
});
</script>
<!-- Clayi Attribution Badge -->
<a href="https://www.clayi.com" target="_blank" rel="noopener"
style="position:fixed;bottom:16px;right:16px;z-index:9999;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;background:rgba(15,23,42,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.75);font-size:.72rem;font-weight:700;font-family:system-ui,sans-serif;text-decoration:none;transition:all .2s;letter-spacing:.02em"
onmouseover="this.style.background='rgba(14,165,233,.25)';this.style.borderColor='rgba(14,165,233,.5)';this.style.color='#fff'"
onmouseout="this.style.background='rgba(15,23,42,.85)';this.style.borderColor='rgba(255,255,255,.12)';this.style.color='rgba(255,255,255,.75)'">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
clayi.com
</a>
</body>
</html>
Download Assets
Wait 10 sec
Free file download — fast & secure!
Download this open-source asset for free on Clayi Assets. Direct CDN link after a short wait — no account required.
There are no comments yet :(