---
url: 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
title: 'Mega-menus responsivos multinível com DXPR Theme | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:44:31+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'O DXPR Theme constrói o seu mega-menu a partir do sistema de menus do próprio Drupal. Crie a estrutura em Structure › Menus, e o tema transforma-a em dropdowns que se dividem em colunas ao crescer, com três níveis de profundidade, que abrem ao passar o cursor ou ao clicar, e se recolhem num menu de hambúrguer nos telemóveis. Sem módulo de mega-menu, sem configuração extra, e as mesmas ligações servem o computador e o telemóvel.'
tags:
  - 'Thema aanpassen met low-code'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T08:44:31+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      '@type': FAQPage
      mainEntity:
        -
          '@type': Question
          name: 'Preciso de um módulo de mega-menu com o DXPR Theme?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Não. Colunas, três níveis, comportamento de hover e clique, suporte de teclado e menu móvel vêm do tema. Só precisa de um menu aninhado com <em>Show as expanded</em> nos ascendentes, ou <em>Expand all menu links</em> no bloco do menu.</p>'
        -
          '@type': Question
          name: 'Porque é que o meu dropdown só abre ao clicar?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Porque algures no menu um dropdown tem um terceiro nível. O tema muda então todo o menu para só-clique, para que um submenu nunca feche enquanto o ponteiro se dirige a ele. Simplifique a estrutura para dois níveis se quiser hover em todo o lado. Os ecrãs táteis e as janelas com menos de 992 píxeis usam sempre o clique.</p>'
        -
          '@type': Question
          name: 'Como obtenho o layout de mega-menu de largura total?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Dê ao dropdown 15 ou mais filhos diretos. A partir de três colunas, ocupa toda a largura do cabeçalho. Com 8 a 14 filhos, obtém duas colunas sob a ligação ascendente; com menos, fica uma só coluna.</p>'
        -
          '@type': Question
          name: 'Uma ligação ascendente pode abrir o dropdown sem navegar?'
          acceptedAnswer:
            '@type': Answer
            text: '<p>Sim. Introduza &lt;nolink&gt; ou &lt;button&gt; como ligação ao editar o item de menu; ambos fazem parte do núcleo do Drupal. O ascendente alterna então o seu dropdown e não tem página própria.</p>'
    -
      '@type': TechArticle
      headline: 'Mega-menus responsivos multinível com DXPR Theme'
      description: 'O DXPR Theme constrói o seu mega-menu a partir do sistema de menus do próprio Drupal. Crie a estrutura em Structure › Menus, e o tema transforma-a em dropdowns que se dividem em colunas ao crescer, com três níveis de profundidade, que abrem ao passar o cursor ou ao clicar, e se recolhem num menu de hambúrguer nos telemóveis. Sem módulo de mega-menu, sem configuração extra, e as mesmas ligações servem o computador e o telemóvel.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:44:31+0000'
      dateModified: '2026-10-24T08:44:31+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/pt-pt/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      articleSection: 'Thema aanpassen met low-code'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentation/learn-dxpr-theme/low-code-theme-customization/responsive-multi-level-mega-menus'
      description: 'O DXPR Theme constrói o seu mega-menu a partir do sistema de menus do próprio Drupal. Crie a estrutura em Structure › Menus, e o tema transforma-a em dropdowns que se dividem em colunas ao crescer, com três níveis de profundidade, que abrem ao passar o cursor ou ao clicar, e se recolhem num menu de hambúrguer nos telemóveis. Sem módulo de mega-menu, sem configuração extra, e as mesmas ligações servem o computador e o telemóvel.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Help Center](/pt-pt/node/75)/[Documentation](/pt-pt/hc/documentation) /[Learn DXPR Theme](/hc/documentation/learn-dxpr-theme) /[Thema aanpassen met low-code](/hc/documentation/learn-dxpr-theme/thema-aanpassen-met-low-code) # Mega-menus responsivos multinível com DXPR Theme.

 Learn DXPR ThemeThema aanpassen met low-code

   ## In this guide

O DXPR Theme constrói o seu mega-menu a partir do sistema de menus do próprio Drupal. Crie a estrutura em *Structure › Menus*, e o tema transforma-a em dropdowns que se dividem em colunas ao crescer, com três níveis de profundidade, que abrem ao passar o cursor ou ao clicar, e se recolhem num menu de hambúrguer nos telemóveis. Sem módulo de mega-menu, sem configuração extra, e as mesmas ligações servem o computador e o telemóvel.

Este guia abrange o DXPR Theme 8.2.1 ou posterior em Drupal 10.3 e Drupal 11. As capturas de ecrã são de um site Drupal 11.4 com DXPR Theme 8.2.2 e um menu de exemplo com três níveis, tiradas em outubro de 2026.

## Como o menu se comporta

- **Dropdowns a partir da indentação.** Cada ligação de menu com filhos torna-se um dropdown. Um ascendente com página própria recebe um controlo dividido: a ligação navega, a seta ao lado abre o dropdown. Um ascendente sem página abre o dropdown com um clique.
- **Colunas a partir do número de ligações.** Um dropdown com 8 ou mais filhos diretos divide-se em 2 colunas; com 15 ou mais, em 3; com 21 ou mais, em 4; e com 28 ou mais, em 5. A partir de 3 colunas, o dropdown estende-se por toda a largura do cabeçalho: é o layout de mega-menu.
- **Três níveis.** Uma ligação dentro de um dropdown pode ter os seus próprios filhos, que se expandem dentro do dropdown, indentados sob o ascendente, para que uma estrutura Serviços › Investigação › Laboratórios funcione sem achatamento.
- **Passar o cursor ou clicar.** Num computador com rato, os dropdowns abrem ao passar o cursor e sempre ao clicar. Quando algum dropdown do menu tem um terceiro nível, todos passam a abrir só ao clicar, para que um submenu nunca feche enquanto o ponteiro se dirige a ele. Os ecrãs táteis e as janelas com menos de 992 píxeis usam sempre o clique.
- **Teclado e leitores de ecrã.** As teclas de setas, Enter, Espaço, Escape e Tab percorrem o menu, e os alternadores expõem o seu estado com `aria-expanded`, seguindo o padrão WAI de navegação por divulgação.
- **Os idiomas da direita para a esquerda** têm dropdowns e submenus espelhados.
- **Telemóveis e tablets.** Abaixo do ponto de interrupção móvel, 1200 píxeis por predefinição, o cabeçalho mostra um ícone de hambúrguer, que abre o menu sobre a página; a seta junto a cada ascendente expande os filhos no local, no segundo nível como no primeiro.

## 1. Criar a estrutura

1. Aceda a *Structure › Menus › Main navigation* (`/admin/structure/menu/manage/main`).
2. Adicione as ligações necessárias com *Add link*. Para um ascendente sem página própria, introduza `<button>` (um botão de teclado nativo) ou `<nolink>` como ligação; ambos abrem o dropdown.
3. Arraste os filhos para baixo do ascendente, indentando um nível (e mais um para um terceiro nível), e prima **Save**.
4. Edite cada ligação ascendente e marque *Show as expanded* e prima **Save**. Para expandir todos os ascendentes de uma vez, marque *Expand all menu links* nas definições do bloco do menu principal.

É toda a configuração. Três níveis é o máximo que os dropdowns apresentam; ligações mais profundas pertencem à página, não ao menu.

A página de administração do menu: filhos indentados sob o ascendente, um terceiro nível sob o segundo.

Uma ligação ascendente sem *Show as expanded* é apresentada sem os filhos, exceto na sua própria página.

## 2. Verificar o menu no computador

Abra o site e passe o cursor sobre a seta junto a uma ligação ascendente, ou clique nele; um ascendente sem página também abre ao clicar. Quando o menu tem um terceiro nível, os dropdowns abrem só ao clicar. Uma lista curta abre como dropdown de uma coluna; uma longa espalha-se em colunas e, a partir de três colunas, por toda a largura do cabeçalho. A ordem segue o peso das ligações na página de administração do menu, coluna a coluna.

O dropdown Serviços no computador, com o terceiro nível expandido.

## 3. Verificar o menu no telemóvel

Estreite o navegador abaixo do ponto de interrupção móvel ou abra o site num telemóvel. O ícone de hambúrguer abre o menu sobre a página. Toque na seta junto a um ascendente para expandir os filhos no local, e na seta junto a uma ligação de segundo nível para expandir o terceiro nível. Nada a configurar: é o mesmo menu.

O menu móvel com Serviços expandido; a seta junto a Investigação abre o terceiro nível.

## 4. Personalizar o cabeçalho e o menu

Todo o aspeto está no separador *Header &amp; Main Menu* das definições do tema (*Appearance* e, depois, *Settings* junto ao DXPR Theme ou ao seu subtema). A página de definições mostra uma antevisão ao vivo enquanto as altera.

- **Layout**: sete disposições de cabeçalho, de *Normal (Logo left, Menu Right)* passando por variantes centradas empilhadas e em linha, até *Logo Right, Menu Left*.
- **Header Style**: *Normal* ou *Overlay* para colocar o cabeçalho sobre o conteúdo da página com fundo transparente, além da opacidade, altura e altura do logótipo do cabeçalho. **Fixed Position** mantém o cabeçalho visível ao deslocar; com esta opção ativa, **Sticky Header** muda o cabeçalho para uma altura menor e opacidade própria após um deslocamento.
- **Main Menu Links**: *Dropdown Width* (automática, ou largura fixa de 100 a 500 píxeis), *Font Style* (normal, maiúsculas, negrito ou texto de destaque), *Link Spacing*, e um *Hover Style* de opacidade, fundo colorido, texto colorido ou uma borda (superior ou inferior, deslizando da esquerda, da direita, do meio ou esbatendo-se a partir do topo).
- **Mobile Header** e **Mobile Menu Options**: o ponto de interrupção móvel (defina-o no máximo, 4100, para usar sempre o cabeçalho móvel), a altura e posição do cabeçalho móvel, o ícone de hambúrguer (três ou duas linhas), a sua animação e o alinhamento do menu.
- **Custom Header Colors**: dezasseis escolhas de cores; fundo e texto para a barra de navegação, blocos de cabeçalho, menu, dropdowns e menu móvel, além de fundo e texto de hover para os últimos três, cada um escolhido na paleta do tema ou com valor personalizado.

Cada alteração é uma definição, não CSS, por isso sobrevive às atualizações do tema. Um subtema tem as suas próprias definições, por isso faça estas alterações na página de definições do subtema.

## Ao migrar do The Better Mega Menu ou de outro módulo de menus

Desinstale o módulo e coloque o bloco *Main navigation* do núcleo na região *Navigation (Collapsible)* do tema, se ainda lá não estiver; é nessa região que o menu de hambúrguer recolhe em ecrãs pequenos. Tudo o que o módulo fazia com configuração, o DXPR Theme faz a partir da estrutura do menu: colunas, níveis, hover e menu móvel. O que não é transferido é o conteúdo dentro do dropdown, como imagens ou blocos de texto; coloque-os nas páginas de destino para onde o menu liga.

## Deixe o agente de IA construir o menu

Um menu é uma lista de ligações com hierarquia, o tipo de tarefa estruturada em que um agente de programação se sai bem. Com a [skill Drush Webmaster](/drupal-agent-skills) instalada (`drush wm:setup-ai`), o seu agente cria e ordena as ligações do menu a partir de um briefing, como «um menu Serviços com Investigação, Ensino e Instalações, e três laboratórios sob Investigação». Com a skill do DXPR Theme (`drush dxt:setup-ai`) define ainda a disposição do cabeçalho, o comportamento fixo e as cores do menu para corresponder à marca. Reveja o resultado no site.

## Perguntas sobre mega-menus do DXPR Theme

### Preciso de um módulo de mega-menu com o DXPR Theme?

Não. Colunas, três níveis, comportamento de hover e clique, suporte de teclado e menu móvel vêm do tema. Só precisa de um menu aninhado com *Show as expanded* nos ascendentes, ou *Expand all menu links* no bloco do menu.

### Porque é que o meu dropdown só abre ao clicar?

Porque algures no menu um dropdown tem um terceiro nível. O tema muda então todo o menu para só-clique, para que um submenu nunca feche enquanto o ponteiro se dirige a ele. Simplifique a estrutura para dois níveis se quiser hover em todo o lado. Os ecrãs táteis e as janelas com menos de 992 píxeis usam sempre o clique.

### Como obtenho o layout de mega-menu de largura total?

Dê ao dropdown 15 ou mais filhos diretos. A partir de três colunas, ocupa toda a largura do cabeçalho. Com 8 a 14 filhos, obtém duas colunas sob a ligação ascendente; com menos, fica uma só coluna.

### Uma ligação ascendente pode abrir o dropdown sem navegar?

Sim. Introduza `<nolink>` ou `<button>` como ligação ao editar o item de menu; ambos fazem parte do núcleo do Drupal. O ascendente alterna então o seu dropdown e não tem página própria.