Mega Menu

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187

<!-- 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>

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

# Mega Menu

Wide multi-column mega menu.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Multi-column layout
- Sectioned links

## Usage

```bash
npx devsnips add Tailwind/Components/Dropdowns/mega-menu
```

Copy from `code.html`.

## Customization

- Column layout, typography, spacing

## Accessibility

- Keyboard navigation across columns

## Dependencies

- Tailwind CSS; JS as present

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`