Components Mega Menu Mega Menu Component

Mega Menu Component

Minimalist/Flat Design - Vibrant, Simple E-commerce Mega Menu with Dark Mode support

Preview

HTML Code

<nav class="bg-white dark:bg-gray-900 shadow-md">
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
    <div class="text-2xl font-bold text-gray-800 dark:text-white">ShopSwift</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Home</a>
      <div class="relative group">
        <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Categories</button>
        <div class="absolute left-0 mt-3 w-56 bg-white dark:bg-gray-800 shadow-lg rounded-md opacity-0 group-hover:opacity-100 group-hover:scale-100 transition-all duration-300 origin-top transform scale-95">
          <div class="p-4">
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Electronics</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Apparel</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Home Goods</a>
            <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md">Books</a>
          </div>
        </div>
      </div>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Deals</a>
      <a href="#" class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 transition duration-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-300 hover:text-orange-500 dark:hover:text-orange-400 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
</nav>

Related Components

Cyberpunk Mega Menu

A complex, cyberpunk-themed mega menu for food/restaurant websites, featuring neon accents, dark backgrounds, full responsiveness, and dark mode support.

Open

Retro Mega Menu

A retro/vintage styled mega menu component with responsive effects and dark theme support, implemented using Tailwind CSS. No JavaScript is included. Dark mode is handled purely with CSS.

Open

Simple Dark Mode Mega Menu

A simple, responsive mega menu component for business websites using dark mode with a complementary color scheme. Built with Tailwind CSS, featuring dark theme support and no JavaScript.

Open