# La recette d’un mega-menu dans le bloc Navigation, sans plugin tiers

> Livrer un mega-menu riche uniquement avec les blocs natifs de navigation et des sous-listes de blocs Groupe, sans dépendance externe. Le problème, le snippet, les variantes.

- Auteur : Clément Hadrot
- Publié le : 2026-07-30
- Mis à jour le : 2026-07-30
- Catégorie : FSE
- URL : https://wpmoderne.dev.wordpress-developpement.fr/fse/mega-menu-bloc-navigation-sans-plugin/

## L’essentiel

- Le sous-menu du bloc Navigation accepte n'importe quel bloc, pas que des liens
- Un Groupe en grille dans un sous-menu suffit pour une vraie section mega-menu
- CSS additionnel minimal pour élargir la zone de sous-menu au-delà de sa colonne

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

> L'essentiel à retenir : Le sous-menu du bloc Navigation accepte n'importe quel bloc, pas que des liens ; Un Groupe en grille dans un sous-menu suffit pour une vraie section mega-menu ; CSS additionnel minimal pour élargir la zone de sous-menu au-delà de sa colonne

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