Mega menús

Un mega menú es un desplegable grande, normalmente a todo el ancho de la barra, que organiza muchos enlaces en columnas con títulos, iconos y descripciones. Lo verás en tiendas, empresas de software y sitios con mucho contenido. En móvil, ambas variantes se convierten en un acordeón dentro de un menú hamburguesa.

Cómo usar esta página

Abre las pestañas HTML / CSS / JS de cada demo para copiar el código, o pulsa Editar en el Playground para experimentar. Prueba el botón de vista móvil de la demo para ver el acordeón.

Mega menú con columnas

Cuándo usarlo: cuando tienes entre 6 y 20 enlaces que se pueden agrupar en categorías (productos, soluciones, recursos). Las descripciones cortas bajo cada enlace ayudan al usuario a decidir sin tener que entrar a cada página.

Mega menú con columnas

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --columnas define cuántas columnas tiene el panel (por defecto 3). Si añades una cuarta columna, cámbialo a 4.
• --ancho-max limita el ancho del contenido para que no se estire demasiado en monitores grandes.
• Los iconos son emojis dentro de .icono; puedes sustituirlos por SVG inline para un look más profesional.
• Para añadir otro mega menú, copia un <li> con su <button aria-controls="..."> y su <div class="panel">, con un id único.
• El punto de quiebre a acordeón está en 760px; ajústalo en el @media según la cantidad de enlaces de tu barra.

/* Panel con 4 columnas y más aire */
:root { --columnas: 4; --ancho-max: 1100px; }
.columnas { gap: 32px; }

Mega menú con tarjeta destacada

Cuándo usarlo: tiendas en línea y landings de producto que quieren promocionar algo (un lanzamiento, una oferta, un curso nuevo) justo donde el usuario está navegando. La tarjeta capta la atención sin ser invasiva.

Mega menú con tarjeta destacada

✏️ Editar en el Playground↗ Abrir en pestaña nueva

Cómo personalizarlo

• --degradado-promo controla el fondo de la tarjeta; puedes usar una imagen en su lugar:

.promo {
  background: linear-gradient(to top, rgb(0 0 0 / .7), transparent), url("producto.jpg") center / cover;
}

• El emoji decorativo sale de .promo::before (propiedad content). Bórralo si usas imagen.
• grid-template-columns: 1fr 1fr 1.2fr en .contenido da más espacio a la tarjeta; ajusta los valores para equilibrar columnas.
• Cambia --color-barra y --color-panel a tonos claros si tu sitio no es oscuro (recuerda ajustar también --color-texto).

Buena práctica

Abre el mega menú con clic (no sólo con hover) y cierra los demás paneles al abrir uno nuevo. Así evitas paneles que aparecen "solos" cuando el usuario simplemente mueve el mouse hacia el contenido de la página, y el menú funciona igual en táctil y con teclado.