Un client dans la distribution d’équipements sportifs voulait un menu principal capable d’afficher, au survol de l’entrée « Nos univers », trois colonnes de sous-catégories accompagnées chacune d’une petite image d’illustration, une structure classique de mega-menu qu’on associe souvent à un plugin de menu avancé ou à un builder tiers.
Le bloc Navigation natif de WordPress permet pourtant ce résultat depuis plusieurs versions, un point que la documentation officielle ne met pas particulièrement en avant : un sous-menu n’est pas limité à une liste de liens, il peut contenir n’importe quel bloc, y compris un Groupe complexe en disposition grille.
Le problème : un sous-menu natif trop étroit pour du contenu riche
Par défaut, l’ajout d’un sous-menu depuis le bloc Navigation crée un bloc core/navigation-submenu contenant une simple liste verticale de liens supplémentaires, avec une largeur calquée sur celle de l’entrée de menu parente. Cette structure convient à un sous-menu classique, mais s’avère bien trop étroite pour trois colonnes d’images et de liens.
Le snippet commenté : transformer un sous-menu en mega-menu
La première étape consiste à ajouter un sous-menu classique depuis l’éditeur, sur l’entrée « Nos univers », puis à supprimer les liens générés par défaut pour les remplacer par un unique bloc Groupe en disposition grille, contenant lui-même trois blocs Groupe représentant chacun une colonne avec image et liens.
<!-- wp:navigation-submenu {"label":"Nos univers"} -->
<!-- wp:group {"layout":{"type":"grid","columnCount":3}} -->
<div class="wp-block-group mega-menu-panel">
<!-- wp:group -->
<div class="wp-block-group">
<!-- wp:image {"width":120} /-->
<!-- wp:heading {"level":4} --><h4>Running</h4><!-- /wp:heading -->
<!-- wp:list -->
<ul><li><a href="/running/chaussures">Chaussures</a></li></ul>
<!-- /wp:list -->
</div>
<!-- /wp:group -->
<!-- wp:group -->
<div class="wp-block-group">...Randonnée...</div>
<!-- /wp:group -->
<!-- wp:group -->
<div class="wp-block-group">...Fitness...</div>
<!-- /wp:group -->
</div>
<!-- /wp:group -->
<!-- /wp:navigation-submenu -->Ce balisage s’insère directement dans l’éditeur en glissant les blocs voulus à l’intérieur du sous-menu, sans nécessiter d’éditeur de code : l’important est de comprendre que le sous-menu accepte n’importe quelle hiérarchie de blocs, pas uniquement une liste plate de liens.
Élargir la zone du sous-menu au-delà de sa colonne d’origine
Le seul ajustement CSS réellement nécessaire concerne la largeur du panneau de sous-menu, contrainte par défaut à la largeur de son parent. Une règle ciblée sur la classe ajoutée manuellement au Groupe racine du sous-menu permet d’élargir ce panneau sans toucher au reste de la navigation :
.wp-block-navigation-submenu .mega-menu-panel {
width: min(90vw, 900px);
position: absolute;
left: 50%;
transform: translateX(-50%);
}Cette règle, ajoutée dans les styles additionnels du thème via theme.json ou une feuille de style enfant, reste la seule intervention hors blocs natifs nécessaire pour obtenir un rendu de mega-menu convaincant visuellement.
Gérer l’accessibilité clavier
Le bloc Navigation natif gère nativement l’ouverture du sous-menu au clavier via la touche Entrée et la fermeture via Échap, y compris pour un sous-menu enrichi comme celui-ci, puisque la mécanique d’ouverture repose sur la structure HTML standard du bloc et non sur un script personnalisé qui aurait pu casser ce comportement.
Variantes utiles
- Mega-menu avec mise en avant produit : ajouter une quatrième colonne contenant un bloc Image et Bouton pointant vers une promotion en cours, mise à jour manuellement par l’équipe marketing.
- Fermeture au clic en dehors : ajouter un tout petit script d’Interactivity API pour fermer le mega-menu au clic extérieur sur mobile, comportement non couvert nativement sur tactile.
- Mega-menu conditionnel par device : masquer la grille à trois colonnes sur mobile au profit d’un simple accordéon natif du bloc Navigation, déjà géré automatiquement en mode menu latéral mobile.
Avant d’installer un plugin de mega-menu, vérifiez toujours ce qu’un sous-menu de bloc Navigation accepte réellement comme contenu : la limitation perçue est presque toujours une limitation d’usage, pas une limitation technique du bloc lui-même.
En résumé
Un mega-menu riche à plusieurs colonnes reste tout à fait accessible avec les seuls blocs natifs de WordPress, en exploitant la capacité du sous-menu à accepter n’importe quelle hiérarchie de blocs plutôt qu’une simple liste de liens. Une unique règle CSS d’élargissement suffit à compléter cette base, sans dépendance à un plugin de menu avancé.
