devsnips
Search docs, APIs, guides…

Component

Mega Menu

Rich mega menu navigation with multi-column layouts, category sections, icons, and featured promotional area.

  • Component
  • Tailwind
  • HTML
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/dropdowns/mega-menu/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Dropdowns/mega-menu
registry path: Tailwind/Components/Dropdowns/mega-menu

Source

Implementation

code.html 
<!-- Mega Menu -->
<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <div class="flex-shrink-0">
        <a href="#" class="flex items-center gap-2">
          <div class="w-8 h-8 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-lg flex items-center justify-center">
            <span class="text-white font-bold text-sm">DS</span>
          </div>
          <span class="font-bold text-gray-900">DevSnips</span>
        </a>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden md:flex items-center space-x-1">
        <!-- Products Mega Menu Trigger -->
        <div class="relative">
          <button
            id="products-trigger"
            class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors flex items-center gap-1"
            onmouseenter="openMegaMenu('products-menu')"
            onclick="toggleMegaMenu('products-menu')"
          >
            Products
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>

          <!-- Products Mega Menu -->
          <div
            id="products-menu"
            class="hidden absolute left-1/2 -translate-x-1/2 top-full mt-1 w-[640px] bg-white rounded-xl shadow-2xl border border-gray-100 overflow-hidden"
            onmouseleave="closeMegaMenu('products-menu')"
          >
            <div class="grid grid-cols-2 gap-6 p-6">
              <!-- Column 1 -->
              <div>
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Components</h3>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">UI Components</p>
                    <p class="text-sm text-gray-500">Buttons, inputs, cards, and more</p>
                  </div>
                </a>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">Data Tables</p>
                    <p class="text-sm text-gray-500">Sortable, filterable, paginated tables</p>
                  </div>
                </a>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-amber-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">Charts</p>
                    <p class="text-sm text-gray-500">Line, bar, pie, and area charts</p>
                  </div>
                </a>
              </div>

              <!-- Column 2 -->
              <div>
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">Templates</h3>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-emerald-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">Landing Pages</p>
                    <p class="text-sm text-gray-500">SaaS, startup, and portfolio pages</p>
                  </div>
                </a>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-rose-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">E-commerce</p>
                    <p class="text-sm text-gray-500">Product listings and checkout flows</p>
                  </div>
                </a>
                <a href="#" class="flex items-start gap-3 p-3 rounded-lg hover:bg-blue-50 transition-colors group">
                  <div class="w-10 h-10 rounded-lg bg-cyan-100 flex items-center justify-center flex-shrink-0">
                    <svg class="w-5 h-5 text-cyan-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                  </div>
                  <div>
                    <p class="font-medium text-gray-900 group-hover:text-blue-600">Admin Dashboards</p>
                    <p class="text-sm text-gray-500">Analytics and management interfaces</p>
                  </div>
                </a>
              </div>
            </div>

            <!-- Featured Section -->
            <div class="px-6 py-4 bg-gradient-to-r from-blue-600 to-indigo-600">
              <div class="flex items-center justify-between">
                <div>
                  <p class="text-white font-semibold">New: Tailwind UI Kit</p>
                  <p class="text-blue-100 text-sm">500+ components, dark mode included</p>
                </div>
                <a href="#" class="px-4 py-2 bg-white text-blue-600 text-sm font-medium rounded-lg hover:bg-blue-50 transition-colors">
                  Learn more
                </a>
              </div>
            </div>
          </div>
        </div>

        <!-- Simple Links -->
        <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors">Pricing</a>
        <a href="#" class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors">Resources</a>
        
        <!-- Docs Link with Simple Dropdown -->
        <div class="relative">
          <button
            class="px-4 py-2 text-sm font-medium text-gray-700 hover:text-blue-600 transition-colors flex items-center gap-1"
            onclick="toggleDropdown('docs-menu')"
          >
            Docs
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
            </svg>
          </button>
          <div id="docs-menu" class="hidden absolute top-full left-0 mt-1 w-48 bg-white rounded-lg shadow-xl border border-gray-100 py-2">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Getting Started</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Components</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">Templates</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600">API Reference</a>
          </div>
        </div>
      </div>

      <!-- CTA Button -->
      <div class="hidden md:flex items-center gap-3">
        <a href="#" class="text-sm font-medium text-gray-700 hover:text-blue-600">Sign in</a>
        <a href="#" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">Get Started</a>
      </div>
    </div>
  </div>
</nav>

<script>
  function openMegaMenu(id) {
    document.getElementById(id).classList.remove('hidden');
  }

  function closeMegaMenu(id) {
    document.getElementById(id).classList.add('hidden');
  }

  function toggleMegaMenu(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  function toggleDropdown(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  document.addEventListener('click', function(event) {
    document.querySelectorAll('[id$="-menu"]').forEach(menu => {
      if (!menu.contains(event.target) && !menu.previousElementSibling?.contains(event.target)) {
        menu.classList.add('hidden');
      }
    });
  });
</script>
187 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/dropdowns/mega-menu
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/dropdowns/mega-menu/

Install: npx devsnips add
Tailwind/Components/Dropdowns/mega-menu

This is the Mega Menu — Rich mega menu navigation with multi-column layouts, category sections, icons, and featured promotional area.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/dropdowns/mega-menu