Components Mega Menu Mega Menu Component

Mega Menu Component

A simple, dark mode e-commerce mega menu component with a grayscale color scheme, built using Tailwind CSS. It is responsive and includes support for dark theme using Tailwind's dark: prefix.

Preview

HTML Code

<nav class="bg-gray-950 text-white p-4">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">ShopName</a>
    <div class="hidden md:flex space-x-6">
      <div class="relative group">
        <button class="hover:text-gray-300">Categories</button>
        <div class="absolute hidden group-hover:block bg-gray-900 shadow-lg mt-2 p-4 rounded-md w-48">
          <a href="#" class="block py-2 hover:bg-gray-800">Electronics</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Apparel</a>
          <a href="#" class="block py-2 hover:bg-gray-800">Home Goods</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-300">New Arrivals</a>
      <a href="#" class="hover:text-gray-300">Sales</a>
      <a href="#" class="hover:text-gray-300">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-white 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 12h16m-7 6h7"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

Related Components

Mega Menu Component

Mega Menu Component with Minimalist/Flat Design, Vibrant color scheme, Complex complexity level, for Dashboard purpose, using Tailwind CSS. Responsive design with dark theme support. No JavaScript code, only HTML with Tailwind classes. Dark mode uses Tailwind's dark: prefix for styling. Images use picsum.photos and randomuser.me for avatars.

Open

Mega Menu Component

A responsive mega menu component designed with a 3D look, including depth effects and dark theme support using Tailwind CSS. The component features images and user avatars from placeholder services.

Open

Mega Menu Component

A responsive mega menu component designed for blogs or content consumption, featuring 3D design elements and earth-toned colors, with dark theme support.

Open