Mega-menus responsivos multinível com DXPR Theme.

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 & 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 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.