Menu déroulant WordPress - Créez une navigation parfaite

Un menu déroulant bien pensé change la lecture d’un site WordPress plus qu’on ne l’imagine : il clarifie la hiérarchie, réduit la sensation de désordre et guide le visiteur vers la bonne page en moins de clics. Dans un projet de design et d’interface, je traite toujours ce sujet comme un outil de structure, pas comme un simple effet visuel. Je vais montrer comment le configurer dans les thèmes classiques et les thèmes à blocs, puis comment le styliser et le rendre vraiment confortable sur mobile.

Ce qu’un sous-menu apporte vraiment à la navigation

Je vois trop souvent des sous-menus ajoutés parce qu’on peut le faire, alors qu’ils ne résolvent aucun problème réel. Un menu déroulant sert d’abord à regrouper des contenus proches sans encombrer la barre principale : services, catégories éditoriales, gammes produit, ressources ou pages institutionnelles. Quand la hiérarchie est claire, le visiteur scanne plus vite et la page d’accueil respire mieux.

Cas	Le sous-menu est pertinent	Je préfère une autre approche si
Services ou offres	Oui, pour rassembler plusieurs variantes sous une entrée mère.	Chaque offre mérite une vraie entrée autonome dans le menu principal.
Catégories éditoriales	Oui, si la taxonomie reste simple et stable.	La liste devient longue au point de dépasser deux niveaux.
Boutique ou catalogue	Oui, pour filtrer l’accès sans alourdir l’en-tête.	Le menu commence à ressembler à un inventaire complet.

Je vise généralement 5 à 7 éléments de premier niveau, puis 3 à 6 liens par sous-menu selon le contexte. Au-delà, je préfère souvent une page d’atterrissage bien structurée ou, pour un catalogue volumineux, un mega menu plus généreux. Cette logique de tri rend la mise en place plus simple, et c’est justement ce que je détaille maintenant selon le type de thème.

Créer un menu déroulant dans un thème classique

Dans un thème classique, la méthode reste directe et fiable. Je pars de l’écran Apparence > Menus, je crée ou j’ouvre le menu concerné, puis j’y ajoute mes pages, catégories ou liens personnalisés. Le point clé est la hiérarchie : un item enfant doit être placé juste sous son parent, puis légèrement décalé vers la droite pour devenir un sous-élément.

1. Ouvrez Apparence > Menus.
2. Créez un menu ou sélectionnez celui qui existe déjà.
3. Ajoutez les pages, catégories ou liens dont vous avez besoin.
4. Faites glisser l’élément enfant légèrement à droite sous l’élément parent.
5. Vérifiez l’emplacement du menu dans les réglages du thème.
6. Enregistrez les modifications.

Si un élément parent doit servir uniquement de déclencheur, un lien personnalisé vers # peut dépanner, mais je ne le garde que si le thème gère ce comportement proprement. Sinon, le visiteur se retrouve avec un faux lien et une expérience frustrante. Dans un menu bien conçu, chaque libellé doit raconter une fonction claire : ouvrir, conduire, rassurer. Cette logique fonctionne très bien dans les thèmes classiques, mais elle change d’outil dès qu’on passe à un thème à blocs.

Gérer la navigation dans un thème à blocs

En 2026, WordPress propose encore deux chemins bien distincts, et les thèmes à blocs utilisent l’Éditeur de site pour la navigation. Ici, le bloc Navigation et son bloc enfant Sous-menu remplacent l’ancienne logique de menu classique. Le gros avantage, c’est que structure et design se travaillent au même endroit, ce qui accélère les ajustements sur des en-têtes plus ambitieux.

1. Allez dans Apparence > Éditeur > Navigation.
2. Sélectionnez un menu existant ou créez-en un nouveau.
3. Ajoutez un bloc Navigation si le gabarit n’en contient pas encore.
4. Sur l’élément parent, ajoutez un bloc Sous-menu.
5. Réorganisez les éléments dans la vue en liste ou par glisser-déposer.
6. Enregistrez les changements avant de quitter l’éditeur.

Je vérifie toujours un point avant de juger le résultat : seules les pages publiées apparaissent dans la navigation. Un brouillon n’entre pas spontanément dans le menu, ce qui évite des erreurs, mais surprend encore quand on teste trop vite. Une fois la structure en place, le travail intéressant commence vraiment : il faut faire en sorte que le sous-menu se lise en une fraction de seconde, sans casser l’équilibre visuel de l’en-tête.

Soigner l’apparence du sous-menu pour qu’il se lise d’un coup d’œil

Le style d’un sous-menu ne doit jamais voler la vedette au contenu : il doit simplement rendre la hiérarchie évidente. Je pars souvent d’une largeur comprise entre 240 et 280 px, avec un fond clair, une ombre légère et des espacements généreux. En dessous de cette zone, le texte respire mal ; au-dessus, le bloc prend trop de place et donne une impression de panneau flottant plutôt que de navigation.

Réglage	Point de départ utile	Effet sur l’interface
Largeur	240 à 280 px	Lecture plus stable et colonnes de texte moins serrées.
Padding vertical	12 à 16 px	Cliquabilité meilleure et rythme visuel plus propre.
Rayon des coins	8 à 12 px	Aspect plus doux sans tomber dans l’effet “cartoon”.
Ombre	Subtile	Détache le sous-menu du contenu sans l’épaissir inutilement.
Contraste	Fort mais sobre	Le texte reste lisible même quand l’en-tête est chargé.

/* Base de style à adapter au sélecteur de votre thème */
.main-navigation .sub-menu {
  min-width: 240px;
  padding: 0.75rem 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.main-navigation .sub-menu a {
  display: block;
  padding: 0.7rem 1rem;
  line-height: 1.4;
}

.main-navigation li:focus-within > .sub-menu,
.main-navigation li:hover > .sub-menu {
  display: block;
}

J’adapte toujours le sélecteur au thème réel, parce que WordPress ne garantit pas une structure CSS identique d’un projet à l’autre. Si le thème pilote l’ouverture en JavaScript, ce bloc sert surtout à la présentation, pas à la mécanique. Mon réflexe est simple : fond, bordure, ombre, puis état actif plus visible au survol ou au focus. Le style compte, mais il ne vaut rien si l’ouverture devient bancale sur écran tactile ou au clavier.

Rendre le sous-menu utilisable au doigt et au clavier

Sur mobile, un sous-menu n’est pas une version réduite du desktop : c’est une interaction différente. Le survol disparaît, les zones de clic doivent être plus larges, et le parent de menu doit rester compréhensible même sans souris. Je vise en général des cibles tactiles d’au moins 44 × 44 px, parce qu’en dessous, on multiplie les erreurs de tap et les retours arrière inutiles.

• Ne dépendez pas du survol : l’ouverture doit fonctionner au tap ou au clic.
• Affichez un vrai état de focus pour les utilisateurs clavier.
• Limitez la profondeur à 2 niveaux dans la plupart des cas, 3 au maximum si la structure l’exige vraiment.
• Évitez les débordements hors de l’écran sur les petits appareils.
• Préférez un comportement en accordéon quand le menu devient trop dense en mobile.

Si je personnalise un menu en code, je synchronise aussi aria-expanded avec l’état réel du sous-menu : c’est une petite chose, mais elle change beaucoup pour les lecteurs d’écran et pour la clarté de l’interface. Quand cette partie est solide, le reste de la navigation gagne en fiabilité, parce que le visiteur n’a plus à deviner comment elle réagit. Il reste alors une dernière étape, souvent négligée, qui évite pourtant une bonne partie des corrections après mise en ligne.

Les vérifications qui évitent une refonte inutile

Avant de publier, je fais toujours un contrôle très concret. Je ne cherche pas la perfection graphique abstraite : je vérifie que le menu aide réellement à naviguer, qu’il ne casse pas sur mobile et qu’il reste cohérent avec l’architecture du site. Dans la pratique, cette étape prend peu de temps et évite beaucoup de retours pénibles.

• Le premier niveau reste lisible en 5 à 7 entrées maximum.
• Chaque libellé est court et décrit clairement ce qu’il ouvre.
• Le sous-menu ne passe pas derrière le contenu à cause d’un z-index trop faible ou d’un overflow: hidden.
• Le comportement est identique au survol, au focus et au tap, au moins dans ses grandes lignes.
• Les pages du menu sont bien publiées et placées dans la bonne zone d’affichage.
• Le test mobile est fait en conditions réelles, pas seulement dans un aperçu rapide.

Si je devais garder une seule règle, ce serait celle-ci : un bon menu déroulant doit faire gagner du temps au lecteur, jamais lui demander d’en deviner le fonctionnement. C’est ce principe qui donne une navigation propre, élégante et durable, quelle que soit la façon dont votre thème WordPress gère les sous-éléments.