Componente de megamenú para Figma: 1.792 variantes

Visión General del Componente

Usa patrones de megamenú para organizar jerarquías de navegación amplias y destinos agrupados. Deja claro el estado y la siguiente acción para que el componente se entienda de un vistazo. Alinea las etiquetas y la jerarquía visual con la pantalla que lo contiene.

Tipos y Variantes

Variantes clave:
- Mega Menu por Columnas: 2–6 columnas con encabezados y listas de enlaces.
- Mega Menu en Grilla: tarjetas o íconos en grilla responsive para categorías visuales.
- Híbrido: columnas + área destacada (promo, imagen o atajos).
- Contextual: contenido que cambia por rol, idioma o segmento.
- Denso vs. Cómodo: listas compactas vs. aireadas según la tarea.
- Método de Apertura: clic/toque; en escritorio, hover opcional con umbrales de intención. Tokens: mega.panel.bg, mega.panel.shadow, mega.heading, mega.link, mega.divider, mega.promo, nav.trigger.active para paridad entre temas claro/oscuro.

Tamaños, Espaciado y Escala

Usa la grilla de la página como marco. Recomendaciones:
- Ancho: alinear al contenedor de contenido; máximo típico 1200–1440 px.
- Columnas: 2–6 columnas; gutters de 16–24 px; ancho de columna 200–280 px.
- Altura por ítem: 36–44 px; encabezados de grupo 12–14 px (overline) o 14–16 px.
- Padding perimetral: 16–24 px dentro del panel; 8–12 px entre encabezado y primer ítem.
- Alineación del disparador: panel alineado al borde del trigger o centrado bajo la barra. Mantén altura estable de la barra y objetivos clicables generosos según Fitts.

Estados y Comportamiento

Estados: default, hover (escritorio), focus-visible, activo, deshabilitado. Prioriza clic/toque para fiabilidad; si habilitas hover en escritorio, añade pequeño retardo de apertura (≈100–150 ms) y uno algo mayor de cierre (≈200–300 ms) con zonas de “perdón” para evitar cierres accidentales. Teclado: Izq./Der. para moverse entre disparadores; Abajo para entrar al panel; Arriba/Abajo dentro de la columna; Esc para cerrar y devolver el foco. Atrapa el foco mientras el panel esté abierto y respeta prefers-reduced-motion. Evita cadenas de hover; solo un nivel dentro del panel.

Integración y Uso

Guías de IA: agrupa por objetivos del usuario; coloca los destinos más usados en la parte superior izquierda; reserva (opcional) un área destacada para campañas o atajos. No mezcles demasiados patrones—elige listas o tarjetas como dominante. En localización, mantén encabezados breves para evitar cortes. En breakpoints pequeños, convierte el mega menu en acordeones dentro de un cajón (burger) preservando orden y agrupación. Documenta responsables de cada enlace (marketing vs. producto) para mantener higiene y auditorías predecibles.

Accesibilidad

Prefiere el patrón de disclosure para navegación del sitio: botón con aria-expanded/aria-controls que muestra/oculta una región etiquetada. Dentro, usa listas semánticas; evita roles de menú de aplicación salvo que implementes toda la semántica y el teclado correspondiente. Proporciona foco visible, contraste 4.5:1 y áreas clicables amplias en encabezados e ítems. Anuncia el panel con nombre accesible (“Menú de productos”) y permite cerrar con Esc desde cualquier punto. Mantén el orden lógico en DOM = visual.

Integración con Figma y Tailwind

Figma: set de componentes con propiedades para columnas (2–6), densidad (denso/cómodo), íconos/miniaturas on/off, slot destacado on/off y estado abierto. Usa Auto Layout y la grilla para fijar gutters y paddings; expón tokens para encabezados, enlaces, divisores y promos. Define Interactions con tiempos de apertura/cierre, intent de hover y estilos de foco. Tailwind: mapea tokens a utilidades en build; centra la documentación en tokens y estados, no en HTML rígido.

Buenas Prácticas de Implementación

- Mantén categorías estables; evita reorganizaciones frecuentes que rompen el hábito.
- Limita a 3–5 columnas en la mayoría de casos; más de 6 eleva el coste de escaneo.
- Etiquetas concisas y orientadas a tarea; no dependas solo de íconos.
- Una única sección promocional; prioriza la navegación sobre marketing.
- Mide interacción (aperturas, dwell, CTR) y elimina enlaces de bajo valor.
- En mobile, convierte a cajón/acordeón; no replique el mega menu de escritorio tal cual.