Méga-menus multiniveaux adaptatifs avec DXPR Theme.

DXPR Theme construit son méga-menu depuis le système de menus de Drupal. Vous créez la structure sous Structure › Menus, le thème la transforme en menus déroulants qui se divisent en colonnes en grandissant, s’imbriquent sur trois niveaux, s’ouvrent au survol ou au clic, et se replient en menu hamburger sur téléphone. Ni module de méga-menu, ni configuration supplémentaire, et les mêmes liens servent le bureau et le mobile.

Ce guide couvre DXPR Theme 8.2.1 ou version ultérieure sur Drupal 10.3 et Drupal 11. Les captures d’écran viennent d’un site Drupal 11.4 avec DXPR Theme 8.2.2 et un exemple de menu à trois niveaux, prises en octobre 2026.

Comportement du menu

• Déroulants par indentation. Chaque lien de menu avec des enfants devient un menu déroulant. Un parent qui a sa propre page reçoit une commande divisée : le lien navigue, le chevron à côté ouvre le menu déroulant. Un parent sans page ouvre le menu déroulant en un clic.
• Colonnes selon le nombre de liens. Un menu déroulant avec 8 enfants directs ou plus se divise en 2 colonnes, 15 ou plus en 3, 21 ou plus en 4 et 28 ou plus en 5. À partir de 3 colonnes, le menu déroulant s’étire sur toute la largeur de l’en-tête : c’est la disposition en méga-menu.
• Trois niveaux. Un lien dans un menu déroulant peut avoir ses propres enfants. Ils se déploient dans le menu déroulant, indentés sous leur parent : une structure Services › Recherche › Laboratoires fonctionne sans aplatissement.
• Survol ou clic. Sur un bureau avec une souris, les menus déroulants s’ouvrent au survol et toujours au clic. Dès qu’un menu déroulant a un troisième niveau, tous passent en mode clic uniquement, pour qu’un sous-menu ne se referme jamais pendant que le pointeur s’en approche. Les écrans tactiles et les fenêtres de moins de 992 pixels utilisent toujours le clic.
• Clavier et lecteurs d’écran. Les flèches, Entrée, Espace, Échap et Tab naviguent dans le menu, et les boutons exposent leur état avec aria-expanded, selon le modèle de navigation WAI.
• Langues de droite à gauche ont des menus déroulants et sous-menus en miroir.
• Téléphones et tablettes. Sous le point de bascule mobile, 1200 pixels par défaut, l’en-tête affiche une icône hamburger. Elle ouvre le menu par-dessus la page, et le chevron à côté de chaque parent déploie ses enfants sur place, au deuxième niveau comme au premier.

1. Créer la structure

1. Allez dans Structure › Menus › Navigation principale (/admin/structure/menu/manage/main).
2. Ajoutez les liens nécessaires avec Ajouter un lien. Pour un parent sans page propre, saisissez <button> (un bouton natif au clavier) ou <nolink> comme lien ; les deux ouvrent le menu déroulant.
3. Glissez les enfants sous leur parent pour les indenter d’un niveau, et d’un niveau de plus pour le troisième, puis cliquez sur Enregistrer.
4. Modifiez chaque lien parent, cochez Afficher comme développé et cliquez sur Enregistrer. Pour développer tous les parents d’un coup, cochez plutôt Développer tous les liens de menu dans les réglages du bloc de menu principal.

Et c’est toute la configuration. Trois niveaux, c’est le maximum affiché par les menus déroulants ; les liens plus profonds ont leur place dans la page, pas dans le menu.

La page d’administration du menu : les enfants indentés sous leur parent, un troisième niveau sous le deuxième.

Un lien parent sans Afficher comme développé s’affiche sans ses enfants, sauf sur sa propre page.

2. Vérifier le menu sur bureau

Ouvrez le site et survolez le chevron à côté d’un lien parent, ou cliquez dessus ; un parent sans page s’ouvre aussi au clic. Quand le menu a un troisième niveau, les menus déroulants s’ouvrent uniquement au clic. Une liste courte s’ouvre en une seule colonne ; une longue s’étale en colonnes et, à partir de trois colonnes, sur toute la largeur de l’en-tête. L’ordre suit le poids des liens dans la page d’administration du menu, colonne par colonne.

Le menu déroulant Services sur bureau, avec le troisième niveau déployé dedans.

3. Vérifier le menu mobile

Réduisez le navigateur sous le point de bascule mobile ou ouvrez le site sur un téléphone. L’icône hamburger ouvre le menu par-dessus la page. Touchez le chevron à côté d’un parent pour déployer ses enfants sur place, et le chevron à côté d’un lien de deuxième niveau pour déployer le troisième. Rien à configurer : c’est le même menu.

Le menu mobile avec Services déployé ; le chevron à côté de Recherche ouvre le troisième niveau.

4. Mettre en forme l’en-tête et le menu

Tout l’aspect se règle dans l’onglet En-tête et menu principal des réglages du thème (Apparence, puis Réglages à côté de DXPR Theme ou de votre sous-thème). La page de réglages affiche un aperçu en direct pendant les modifications.

• Disposition : sept mises en page d’en-tête, de Normal (Logo à gauche, Menu à droite) aux variantes centrées empilées et en ligne, jusqu’à Logo à droite, Menu à gauche.
• Style d’en-tête : Normal, ou Superposé pour placer l’en-tête sur le contenu avec un fond transparent, plus l’opacité, la hauteur de l’en-tête et la hauteur du logo. Position fixe garde l’en-tête visible pendant le défilement ; une fois activé, En-tête fixe réduit l’en-tête à une hauteur moindre avec sa propre opacité après un décalage de défilement.
• Liens du menu principal : Largeur du menu déroulant (automatique, ou largeur fixe de 100 à 500 pixels), Style de police (normal, majuscules, gras ou texte d’introduction), Espacement des liens, et un Style de survol : opacité, fond coloré, texte coloré ou bordure (haut ou bas, glissant depuis la gauche, la droite, le milieu, ou fondu depuis le haut).
• En-tête mobile et Options du menu mobile : le point de bascule mobile (au maximum, 4100, pour toujours utiliser l’en-tête mobile), la hauteur et la position de l’en-tête mobile, l’icône hamburger (trois ou deux lignes), son animation et l’alignement du menu.
• Couleurs d’en-tête personnalisées : seize choix de couleurs, fond et texte pour la barre de navigation, les blocs d’en-tête, le menu, les menus déroulants et le menu mobile, plus le fond et le texte de survol pour les trois derniers, chacun pris dans la palette du thème ou défini sur mesure.

Chaque changement est un réglage, pas du CSS, et survit donc aux mises à jour du thème. Un sous-thème a ses propres réglages : faites ces changements sur sa page de réglages.

Depuis The Better Mega Menu ou un autre module de menus

Désinstallez le module et placez le bloc Navigation principale du cœur dans la région Navigation (repliable) si ce n’est pas déjà fait ; c’est dans cette région que le menu hamburger se replie sur petit écran. Tout ce que le module faisait par configuration, DXPR Theme le fait depuis la structure du menu : colonnes, niveaux, survol et menu mobile. Seul le contenu dans le menu déroulant ne suit pas, comme les images ou les blocs de texte ; placez-les sur les pages de destination vers lesquelles pointent les liens.

Laissez votre agent IA construire le menu

Un menu est une liste de liens avec une hiérarchie, le genre de tâche structurée qu’un agent de code fait bien. Avec la compétence Drush Webmaster installée (drush wm:setup-ai), votre agent crée et ordonne les liens de menu depuis un brief, comme « un menu Services avec Recherche, Enseignement et Équipements, et trois laboratoires sous Recherche ». Avec la compétence de DXPR Theme (drush dxt:setup-ai) il règle aussi la mise en page d’en-tête, le comportement fixe et les couleurs du menu aux couleurs de la marque. Vous relisez le résultat sur le site.