Mega Navigation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<nav class="bg-white border-b border-gray-200">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex items-center justify-between h-16">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-9 h-9 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center">
          <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
          </svg>
        </div>
        <span class="text-gray-900 text-xl font-bold">StoreHub</span>
      </a>

      <!-- Navigation with Mega Menu -->
      <div class="hidden lg:flex items-center">
        <div class="relative group">
          <button class="flex items-center gap-1 px-4 py-2 text-gray-700 hover:text-cyan-600 font-medium transition-colors">
            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"/>
            </svg>
          </button>
          
          <!-- Mega Menu Dropdown -->
          <div class="absolute left-0 top-full w-[600px] bg-white rounded-2xl shadow-xl border border-gray-100 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 pt-2">
            <div class="p-6 grid grid-cols-4 gap-6">
              <div>
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Electronics</h3>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Smartphones</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Laptops</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Tablets</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Accessories</a>
              </div>
              <div>
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Fashion</h3>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Men's Clothing</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Women's Clothing</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Shoes</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Watches</a>
              </div>
              <div>
                <h3 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Home & Garden</h3>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Furniture</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Kitchen</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Decor</a>
                <a href="#" class="block py-2 text-gray-600 hover:text-cyan-600 transition-colors">Garden</a>
              </div>
              <div class="bg-gradient-to-br from-cyan-50 to-blue-50 rounded-xl p-4">
                <h3 class="font-semibold text-gray-900 mb-2">Featured Sale</h3>
                <p class="text-sm text-gray-600 mb-3">Up to 50% off on selected items</p>
                <a href="#" class="text-cyan-600 text-sm font-medium hover:underline">Shop Now →</a>
              </div>
            </div>
          </div>
        </div>
        
        <a href="#" class="px-4 py-2 text-gray-700 hover:text-cyan-600 font-medium transition-colors">Deals</a>
        <a href="#" class="px-4 py-2 text-gray-700 hover:text-cyan-600 font-medium transition-colors">New Arrivals</a>
        <a href="#" class="px-4 py-2 text-gray-700 hover:text-cyan-600 font-medium transition-colors">Brands</a>
      </div>

      <!-- Actions -->
      <div class="flex items-center gap-4">
        <button class="p-2 text-gray-500 hover:text-gray-700" aria-label="Search">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
          </svg>
        </button>
        <button class="p-2 text-gray-500 hover:text-gray-700 relative" aria-label="Cart">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
          </svg>
          <span class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-500 text-white text-xs rounded-full flex items-center justify-center">2</span>
        </button>
        <a href="#" class="px-4 py-2 bg-cyan-500 text-white text-sm font-medium rounded-lg hover:bg-cyan-600 transition-colors">Sign In</a>
      </div>
    </div>
  </div>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12

# Mega Navigation

Navbar with mega menu.

## Usage
```bash
npx devsnips add Tailwind/Components/Navigation/mega-navigation
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`