MegaMenu

'use client'
import { useState } from 'react'

const MENU = [
  {
    label:'Components', items:[
      { icon:'🔘', name:'Buttons', count:42 },{ icon:'📋','name':'Forms', count:38 },{ icon:'🃏', name:'Cards', count:55 },
      { icon:'📊', name:'Charts', count:24 },{ icon:'🗂️', name:'Tables', count:18 },{ icon:'🎭', name:'Overlays', count:31 },
    ]
  },
  {
    label:'Templates', items:[
      { icon:'📱', name:'Dashboard', count:12 },{ icon:'🛒', name:'E-commerce', count:8 },
      { icon:'📰', name:'Blog', count:10 },{ icon:'🏠', name:'Landing', count:15 },
    ]
  },
]

export default function MegaMenu() {
  const [active, setActive] = useState(null)
  return (
    <div style={{ position:'relative', fontFamily:'sans-serif' }}>
      <nav style={{ display:'flex', gap:'4px', background:'#1e1e2e', padding:'0 16px', borderRadius:'12px' }}>
        {MENU.map(m => (
          <button key={m.label} onMouseEnter={()=>setActive(m.label)} onMouseLeave={()=>setActive(null)}
            style={{ padding:'14px 16px', background:'none', border:'none', color:active===m.label?'#a78bfa':'#94a3b8', cursor:'pointer', fontSize:'14px', fontWeight:600, transition:'color 0.15s' }}>
            {m.label} ▾
          </button>
        ))}
      </nav>
      {active && (
        <div onMouseEnter={()=>setActive(active)} onMouseLeave={()=>setActive(null)} style={{
          position:'absolute', top:'calc(100%+8px)', left:0, minWidth:'400px',
          background:'#fff', borderRadius:'14px', padding:'20px',
          boxShadow:'0 20px 60px rgba(0,0,0,0.15)', zIndex:100,
          display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:'8px',
          animation:'fadeIn 0.15s ease',
        }}>
          <style>{'@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}'}</style>
          {MENU.find(m=>m.label===active)?.items.map(item=>(
            <div key={item.name} style={{
              display:'flex', alignItems:'center', gap:'10px', padding:'10px 12px',
              borderRadius:'10px', cursor:'pointer', transition:'background 0.15s',
            }}
              onMouseEnter={e=>e.currentTarget.style.background='#f5f3ff'}
              onMouseLeave={e=>e.currentTarget.style.background='transparent'}
            >
              <span style={{ fontSize:'22px' }}>{item.icon}</span>
              <div>
                <div style={{ fontWeight:600, fontSize:'13px', color:'#1e293b' }}>{item.name}</div>
                <div style={{ fontSize:'11px', color:'#94a3b8' }}>{item.count} components</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Component info

About

Full-width mega menu with categories, icons and featured section