---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
title: 'Mega menús adaptables de varios niveles con DXPR Theme | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:50:24+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: '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.'
tags:
  - Drupal-woordenlijst
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:50:24+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: '¿Necesito un módulo de mega menú con DXPR Theme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>No. Las columnas, los tres niveles, el comportamiento al pasar el puntero y al hacer clic, el teclado y el menú móvil vienen del tema. Solo necesitas un menú anidado con <em>Mostrar como expandido</em> en los superiores, o <em>Expandir todos los enlaces del menú</em> en el bloque de menú.</p>'
        -
          '@type': Question
          name: '¿Por qué mi desplegable solo se abre al hacer clic?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Porque en algún punto del menú un desplegable tiene un tercer nivel. El tema cambia entonces todo el menú a solo clic, para que un submenú nunca se cierre mientras el puntero viaja hacia él. Aplana la estructura a dos niveles si quieres el paso del puntero en todas partes. Las pantallas táctiles y las ventanas de menos de 992 píxeles siempre usan el clic.</p>'
        -
          '@type': Question
          name: '¿Cómo consigo el diseño de mega menú de ancho completo?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Dale al desplegable 15 o más hijos directos. Desde tres columnas abarca todo el ancho del encabezado. Con 8 a 14 hijos tienes dos columnas bajo el enlace superior; con menos queda una sola columna.</p>'
        -
          '@type': Question
          name: '¿Puede un enlace superior abrir el desplegable sin ir a ningún sitio?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Sí. Indica &lt;nolink&gt; o &lt;button&gt; como enlace al editar el elemento de menú; ambos vienen integrados en el núcleo de Drupal. El superior abre y cierra entonces su desplegable y no tiene página propia.</p>'
    -
      '@type': TechArticle
      headline: 'Mega menús adaptables de varios niveles con DXPR Theme'
      description: '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.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:50:24+0000'
      dateModified: '2026-10-24T08:50:24+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      articleSection: Drupal-woordenlijst
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: '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.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn Drupal](/hc/documentation/learn-drupal) /[Drupal-woordenlijst](/hc/documentation/learn-drupal/drupal-woordenlijst) # Mega menús adaptables de varios niveles con DXPR Theme.

 Learn DrupalDrupal-woordenlijst

   ## In this guide

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](/drupal-agent-skills) 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.

## Preguntas sobre mega menús de DXPR Theme

### ¿Necesito un módulo de mega menú con DXPR Theme?

No. Las columnas, los tres niveles, el comportamiento al pasar el puntero y al hacer clic, el teclado y el menú móvil vienen del tema. Solo necesitas un menú anidado con *Mostrar como expandido* en los superiores, o *Expandir todos los enlaces del menú* en el bloque de menú.

### ¿Por qué mi desplegable solo se abre al hacer clic?

Porque en algún punto del menú un desplegable tiene un tercer nivel. El tema cambia entonces todo el menú a solo clic, para que un submenú nunca se cierre mientras el puntero viaja hacia él. Aplana la estructura a dos niveles si quieres el paso del puntero en todas partes. Las pantallas táctiles y las ventanas de menos de 992 píxeles siempre usan el clic.

### ¿Cómo consigo el diseño de mega menú de ancho completo?

Dale al desplegable 15 o más hijos directos. Desde tres columnas abarca todo el ancho del encabezado. Con 8 a 14 hijos tienes dos columnas bajo el enlace superior; con menos queda una sola columna.

### ¿Puede un enlace superior abrir el desplegable sin ir a ningún sitio?

Sí. Indica `<nolink>` o `<button>` como enlace al editar el elemento de menú; ambos vienen integrados en el núcleo de Drupal. El superior abre y cierra entonces su desplegable y no tiene página propia.