Mega menús adaptables de varios niveles con DXPR Theme

DXPR Theme crea su mega menú desde el propio sistema de menús de Drupal. Creas la estructura en Estructura › Menús, el tema la convierte en desplegables que se dividen en columnas al crecer, anidan tres niveles, se abren al pasar el puntero o al hacer clic, y se pliegan en un menú de hamburguesa en los teléfonos. Sin módulo de mega menú, sin configuración extra, y los mismos enlaces sirven para escritorio y móvil.

Esta guía cubre DXPR Theme 8.2.1 o versiones posteriores en Drupal 10.3 y Drupal 11. Las capturas vienen de un sitio Drupal 11.4 con DXPR Theme 8.2.2 y un menú de ejemplo de tres niveles, tomadas en octubre de 2026.

Cómo se comporta el menú

• Desplegables desde la sangría. Cada enlace de menú con hijos se convierte en un desplegable. Un superior con página propia tiene un control dividido: el enlace navega, la flecha junto a él abre el desplegable. Un superior sin página abre el desplegable con un clic.
• Columnas según el número de enlaces. Un desplegable con 8 o más hijos directos se divide en 2 columnas, con 15 o más en 3, con 21 o más en 4 y con 28 o más en 5. Desde 3 columnas, el desplegable se estira a todo el ancho del encabezado, que es el diseño de mega menú.
• Tres niveles. Un enlace dentro de un desplegable puede tener hijos propios. Se expanden dentro del desplegable, con sangría bajo su superior, así una estructura Servicios › Investigación › Laboratorios funciona sin aplanarse.
• Al pasar el puntero o al hacer clic. En un escritorio con ratón, los desplegables se abren al pasar el puntero y siempre al hacer clic. Cuando algún desplegable del menú tiene un tercer nivel, todos los desplegables pasan a solo clic, para que un submenú nunca se cierre mientras el puntero viaja hacia él. Las pantallas táctiles y las ventanas de menos de 992 píxeles siempre usan el clic.
• Teclado y lectores de pantalla. Las teclas de flecha, Intro, Espacio, Escape y Tab recorren el menú, y los conmutadores exponen su estado con aria-expanded, según el patrón de navegación por divulgación de WAI.
• Los idiomas de derecha a izquierda tienen desplegables y submenús reflejados.
• Teléfonos y tabletas. Por debajo del punto de ruptura móvil, 1200 píxeles por defecto, el encabezado muestra un icono de hamburguesa. Abre el menú sobre la página, y la flecha junto a cada superior expande a sus hijos en el sitio, en el segundo nivel como en el primero.

1. Crea la estructura

1. Ve a Estructura › Menús › Navegación principal (/admin/structure/menu/manage/main).
2. Añade los enlaces que necesites con Añadir enlace. Para un superior sin página propia, indica <button> (un botón de teclado nativo) o <nolink> como enlace; ambos abren el desplegable.
3. Arrastra los hijos bajo su superior para que tengan sangría de un nivel, y un tercer nivel una más, y luego pulsa Guardar.
4. Edita cada enlace superior, marca Mostrar como expandido y pulsa Guardar. Para expandir todos los superiores a la vez, marca Expandir todos los enlaces del menú en los ajustes del bloque del menú principal.

Esa es toda la configuración. Tres niveles es el máximo que muestran los desplegables; los enlaces más profundos pertenecen a la página, no al menú.

La página de administración del menú: hijos con sangría bajo su superior, un tercer nivel bajo el segundo.

Un enlace superior sin Mostrar como expandido se muestra sin sus hijos, salvo en su propia página.

2. Revisa el menú de escritorio

Abre el sitio y pasa el puntero sobre la flecha junto a un enlace superior, o haz clic en ella; un superior sin página también se abre al hacer clic. Cuando el menú tiene un tercer nivel, los desplegables solo se abren al hacer clic. Una lista corta se abre como desplegable de una columna; una larga se extiende en columnas y, desde tres columnas, a todo el ancho del encabezado. El orden sigue el peso de los enlaces en la página de administración del menú, columna por columna.

El desplegable Servicios en escritorio, con el tercer nivel expandido dentro.

3. Revisa el menú móvil

Estrecha el navegador por debajo del punto de ruptura móvil o abre el sitio en un teléfono. El icono de hamburguesa abre el menú sobre la página. Toca la flecha junto a un superior para expandir a sus hijos en el sitio, y la flecha junto a un enlace de segundo nivel para expandir el tercer nivel. Nada que configurar: es el mismo menú.

El menú móvil con Servicios expandido; la flecha junto a Investigación abre el tercer nivel.

4. Da estilo al encabezado y al menú

Todo lo del aspecto vive en la pestaña Encabezado y menú principal de los ajustes del tema (Apariencia, luego Ajustes junto a DXPR Theme o tu subtema). La página de ajustes muestra una vista previa en directo mientras los cambias.

• Diseño: siete diseños de encabezado, de Normal (Logo left, Menu Right) a Logo Right, Menu Left, pasando por variantes centradas apiladas y en línea.
• Estilo de encabezado: Normal, u Overlay para colocar el encabezado sobre el contenido de la página con fondo transparente, más la opacidad, la altura y la altura del logotipo del encabezado. Fixed Position mantiene el encabezado a la vista al desplazarse; con ella activada, Sticky Header cambia el encabezado a una altura menor y su propia opacidad tras un desplazamiento.
• Enlaces del menú principal: Dropdown Width (automático, o un ancho fijo de 100 a 500 píxeles), Font Style (normal, mayúsculas, negrita o texto destacado), Link Spacing, y un Hover Style de opacidad, fondo de color, texto de color o un borde (arriba o abajo, que entra desde la izquierda, la derecha, el centro o se difumina desde arriba).
• Mobile Header y Mobile Menu Options: el punto de ruptura móvil (fíjalo al máximo, 4100, para usar siempre el encabezado móvil), la altura y la posición del encabezado móvil, el icono de hamburguesa (tres o dos líneas), su animación y la alineación del menú.
• Custom Header Colors: dieciséis opciones de color, fondo y texto para la barra de navegación, los bloques del encabezado, el menú, los desplegables y el menú móvil, más fondo y texto al pasar el puntero para los tres últimos, cada uno elegido de la paleta del tema o con un valor personalizado.

Cada cambio es un ajuste, no CSS, así que sobrevive a las actualizaciones del tema. Un subtema tiene sus propios ajustes, así que haz estos cambios en la página de ajustes del subtema.

Si vienes de The Better Mega Menu u otro módulo de menús

Desinstala el módulo y coloca el bloque Main navigation del núcleo en la región Navigation (Collapsible) del tema si aún no está ahí; esa región es en la que se pliega el menú de hamburguesa en pantallas pequeñas. Todo lo que el módulo hacía con configuración, DXPR Theme lo hace desde la estructura del menú: columnas, niveles, paso del puntero y menú móvil. Lo que no se traslada es el contenido dentro del desplegable, como imágenes o bloques de texto; ponlo en las páginas de destino a las que enlaza el menú.

Deja que tu agente de IA cree el menú

Un menú es una lista de enlaces con jerarquía, el tipo de tarea estructurada que un agente de programación hace bien. Con el skill Drush Webmaster instalado (drush wm:setup-ai), tu agente crea y ordena los enlaces del menú desde un brief, como «un menú Servicios con Investigación, Enseñanza e Instalaciones, y tres laboratorios bajo Investigación». Con el skill de DXPR Theme (drush dxt:setup-ai) también fija el diseño del encabezado, el comportamiento fijo y los colores del menú según la marca. Revisas el resultado en el sitio.