Comment créer un sous-menu dans WordPress : réglages de menu, étape par étape

Un site WordPress sans sous-menu, c’est un peu comme une cave de Champagne sans étiquettes : tout est là, mais personne ne sait où chercher. Structurer la navigation avec des menus déroulants permet de guider l’œil, de hiérarchiser l’information et, surtout, d’éviter que vos visiteurs se perdent dans un labyrinthe de pages. Entre thèmes classiques et thèmes basés sur les blocs, l’interface a beaucoup évolué depuis WordPress 5.9 et les habitudes doivent parfois être dépoussiérées. La bonne nouvelle, c’est qu’une fois les bons réflexes en place, créer un sous-menu devient un geste presque aussi naturel que classer des dossiers dans un tiroir.

Ce guide détaille une méthode vraiment opérationnelle, étape par étape, depuis l’identification de votre environnement jusqu’aux réglages fins d’accessibilité et de responsive. Il s’adresse autant aux responsables marketing qui pilotent leur site depuis le tableau de bord qu’aux intégrateurs qui veulent une structure du menu propre, lisible et stable dans le temps. On y croise un personnage fil rouge, Claire, qui gère le site d’une PME industrielle et qui doit transformer un menu surchargé en navigation claire, sans recoder tout le thème. Entre glisser-déposer, création de liens non cliquables et usage malin du bloc Navigation, l’objectif reste simple : un système de menus déroulants logique, élégant et mesurable dans vos analytics.

En bref

• Identifier le type de thème (classique ou FSE) conditionne la méthode de création du sous-menu et l’emplacement des réglages.
• Construire une structure du menu lisible avant de toucher à la technique évite les arborescences ingérables.
• Utiliser le glisser-déposer ou le bloc Navigation permet de créer des menus déroulants en quelques clics, étape par étape.
• Personnaliser titres, classes CSS et attributs ARIA améliore autant l’esthétique que l’accessibilité.
• Tester la navigation sur mobile et survol souris reste indispensable pour valider l’expérience réelle des visiteurs.

Repérer son environnement WordPress avant de créer un sous-menu

Avant même de déplacer le moindre élément de menu, la première question à régler est simple : sur quel type de thème tourne le site ? Claire, par exemple, utilisait encore un thème classique sans vraiment le savoir. Elle cherchait le bloc Navigation vu dans un tutoriel récent, sans comprendre pourquoi l’option n’apparaissait pas. Résultat, une demi-heure perdue à tourner en rond dans le tableau de bord. Ce cas revient souvent et se règle en deux minutes avec la bonne vérification.

La distinction est nette. Les thèmes classiques s’appuient sur l’ancienne logique Apparence > Menus, parfois doublée par Apparence > Personnaliser > Menus. Les thèmes FSE (Full Site Editing, basés sur des blocs) centralisent la navigation dans Apparence > Éditeur, via le bloc Navigation. Cette différence change complètement la méthode pour obtenir un sous-menu, même si le résultat final, lui, paraît similaire pour l’utilisateur.

Un moyen très simple de trancher consiste à ouvrir la section Apparence dans le tableau de bord. Si le mot « Éditeur » apparaît juste sous « Thèmes », le site repose sur un thème compatible FSE. Dans le cas contraire, vous naviguez sur un système plus traditionnel, qui reste largement suffisant pour des besoins classiques. Les deux approches cohabitent encore sur beaucoup de parcs WordPress, notamment dans les PME où les refontes se font par cycles de 4 à 6 ans.

Pour clarifier ce diagnostic, voici un panorama synthétique des deux environnements, avec la façon dont on y gère les menus et les futurs sous-menus.

Claire a découvert qu’elle utilisait un thème FSE en cliquant sur Aperçu du site dans l’Éditeur, puis en ouvrant la vue en liste, cette fameuse icône de trois lignes superposées qui montre la hiérarchie des blocs. Dans cette vue, le bloc Navigation apparaissait niché dans un bloc En-tête, lui-même dans un groupe. Ce simple aperçu lui a permis de comprendre que ses réglages de menu se faisaient dorénavant « dans » la page, et non plus dans un écran séparé.

À l’inverse, pour un site vitrine plus ancien d’une maison de Champagne, la gestion passait encore par Apparence > Menus. Là, la structure du menu se présentait comme une liste verticale de blocs clairs, avec des triangles pour déplier les options de chaque élément. Le glisser-déposer y restait le moyen le plus rapide de créer un sous-menu, avec un repère visuel très lisible : une indentation vers la droite.

Cette première étape, souvent négligée, conditionne tout le reste de votre travail. Confondre les environnements mène à des heures perdues et à des impressions fausses du type « WordPress ne me propose pas cette option ». Une fois le décor posé, tout devient plus fluide, car chaque clic se fait au bon endroit.

Retenir en tête cette cartographie simple entre thèmes classiques et FSE, c’est déjà sécuriser la moitié du chemin vers une navigation claire.

Construire la structure du menu principal avant les sous-menus

Une erreur courante consiste à se précipiter sur les menus déroulants sans avoir posé l’ossature du menu principal. Claire avait par exemple empilé dix entrées dans sa barre de navigation, dont trois renvoyaient vers des documents PDF et deux vers des pages d’actualités. Résultat, une barre illisible sur desktop et un burger interminable sur mobile. Avant de parler de sous-menu, il faut donc cartographier l’arborescence.

La démarche gagnante reste de partir des grandes familles de contenu. Pour un site B2B, on retrouve souvent un trio maître : « Solutions », « Secteurs », « Ressources ». Pour une maison de Champagne, les rubriques pivot deviennent « Cuvées », « Visites », « Histoire ». Le menu principal ne sert pas à tout montrer, mais à ouvrir des portes vers ces univers. Les sous-menus, eux, détaillent ensuite ces univers de façon digeste.

Dans WordPress, la construction commence par la création d’un nouveau menu. Dans Apparence > Menus, on clique sur « Créer un nouveau menu », on lui donne un nom explicite, par exemple « Menu header » ou « Navigation principale ». Côté FSE, la logique est voisine : dans l’Éditeur de site, on sélectionne le bloc Navigation, puis on choisit de créer un nouveau menu ou d’en réutiliser un existant. Nommer clairement ses menus paraît trivial, pourtant, sur un projet avec plusieurs zones (header, footer, mobile spécifique), cela évite de sérieuses confusions.

Ensuite vient l’étape des contenus à intégrer. Quelques règles simples rendent la navigation bien plus claire :

• les pages servent de squelette : à créer d’abord dans Pages > Ajouter, puis à ajouter dans le menu ;
• les catégories de blog deviennent des entrées utiles pour les rubriques éditoriales ;
• les liens personnalisés gèrent les redirections externes ou les ancres internes ;
• les articles individuels n’ont presque jamais leur place dans un menu principal.

Claire a par exemple choisi de retirer ses fiches techniques du menu principal, pour les regrouper dans une page « Documentation » elle-même visible dans un futur sous-menu. Cette décision a allégé la barre de navigation sans réduire l’accès à l’information, tout en améliorant nettement la lisibilité sur mobiles.

Une fois ces éléments ajoutés, l’ordre prend toute son importance. Par convention de lecture, l’élément le plus à gauche est souvent « Accueil », suivi des pages fortes de découverte (offre, produits), et les liens plus fonctionnels, comme « Blog » ou « Contact », glissent vers la droite. L’ordre ne relève pas seulement du goût, il influence directement le parcours et les taux de clics observés dans vos statistiques.

Dernier point souvent négligé : l’emplacement du menu. Dans les réglages de menu des thèmes classiques, on coche l’emplacement « Menu principal » ou « Header ». Sur les thèmes FSE, les options de position se trouvent dans les réglages du bloc Navigation, avec des choix de justification (gauche, centre, droite) et parfois des variations pour mobile. Attribuer le bon emplacement dès le départ évite la surprise du menu qui n’apparaît pas en front alors que tout semble correctement configuré.

Une structure du menu principal réfléchie, c’est un peu la grille d’accrochage d’une exposition : sans elle, même les plus belles œuvres se perdent dans le désordre.

Créer un sous-menu WordPress étape par étape avec menus déroulants

Une fois l’ossature en place, le moment vient d’installer les sous-menus. C’est la partie la plus visuelle et souvent la plus satisfaisante : les éléments s’imbriquent, les menus déroulants apparaissent, la navigation gagne en profondeur sans se transformer en mur d’options. Pour Claire, l’objectif était clair : faire vivre sous « Solutions » trois entrées précises, tout en gardant la ligne principale épurée.

Sur un thème classique, la méthode passe par le glisser-déposer. Dans Apparence > Menus, on sélectionne bien le bon menu en haut de l’écran. Puis on ajoute les éléments à transformer en sous-menus, par exemple « Solution A », « Solution B », « Solution C ». Ces éléments se positionnent d’abord au même niveau que les autres. Pour les transformer en sous-menu, la séquence reste toujours la même :

1. Sélectionner l’élément destiné à devenir un sous-menu.
2. Le faire glisser légèrement vers la droite, sous l’élément parent souhaité, jusqu’à voir apparaître une indentation.
3. Relâcher la souris pour valider le statut de « sous-élément ».
4. Répéter l’opération pour les autres entrées du menu déroulant.
5. Cliquer sur « Enregistrer le menu » pour figer la nouvelle structure.

Visuellement, une ligne de connexion ou un niveau décalé vers la droite confirme la hiérarchie. En règle générale, mieux vaut ne pas dépasser deux niveaux de profondeur. Au-delà, l’ergonomie se dégrade, surtout sur mobile, et l’utilisateur ne sait plus exactement où il se trouve. Les rares projets qui supportent trois niveaux sont souvent des sites de documentation très spécialisés, pensés pour des utilisateurs experts.

Dans l’Éditeur de site des thèmes FSE, la logique diffère légèrement. On clique d’abord sur le bloc Navigation, puis sur l’élément qui doit devenir parent. Une petite barre s’affiche au-dessus, avec un bouton « Ajouter un sous-menu » représenté par une icône en forme de flèche incurvée. Un clic sur ce bouton transforme l’élément en conteneur de menu déroulant. Ensuite, on ajoute les pages enfants via l’icône « + » ou l’option « Ajouter un lien », et on ajuste l’ordre avec les flèches de déplacement.

Claire, qui gérait un thème basé sur les blocs, a apprécié cette approche : tout se passe en contexte, avec un aperçu direct sur le header. En ouvrant la vue en liste, elle voyait bien le parent, suivi de ses items enfants légèrement décalés, ce qui lui donnait une vision claire de sa hiérarchie. En parallèle, le site passait automatiquement du menu horizontal au menu burger sur mobile, sans effort supplémentaire.

Un détail à garder en tête : la possibilité d’avoir un élément de menu non cliquable, particulièrement pratique pour un parent de sous-menu. Dans un thème classique, il suffit d’ajouter un lien personnalisé avec le symbole « # » comme URL, puis de saisir le texte souhaité. Une fois l’élément placé, on crée les sous-menus à partir de ce parent. L’utilisateur ne peut alors pas « entrer » dans la rubrique via une page spécifique, mais voit s’ouvrir la liste de choix disponibles.

Sur les thèmes FSE, la manipulation est voisine : on insère un lien personnalisé, on saisit « # » dans le champ de lien, puis on définit le texte d’affichage. Le parent devient un simple déclencheur de menu déroulant, ce qui évite certains conflits de clics, notamment sur mobile où le même tap ne peut pas à la fois ouvrir un sous-menu et charger une page de destination.

Une fois la structure finalisée, un test rapide s’impose : survol souris sur desktop, clic sur tablette, tap sur smartphone. Ce passage par la réalité permet de vérifier que le sous-menu ne disparaît pas trop vite, que les liens sont faciles à atteindre et que la profondeur reste raisonnable. En navigation, la preuve se fait toujours sur écran, pas dans l’éditeur.

Personnalisation, accessibilité et réglages avancés des sous-menus

Un sous-menu fonctionnel ne suffit pas. Pour un site installé, les détails de personnalisation font la différence entre une navigation lambda et une expérience fluide, respectueuse de tous les usages. Claire s’est retrouvée dans ce cas : son sous-menu « Solutions » existait, mais les intitulés étaient trop longs, l’affichage cassait sur deux lignes et les lecteurs d’écran annonçaient des informations peu claires. Les réglages fins ont totalement changé la donne.

Dans les thèmes classiques, chaque élément de menu dispose d’options avancées accessibles via la petite flèche à droite de son intitulé. On y trouve le titre de navigation, qui permet d’afficher un libellé différent du titre de page réel. Pratique pour raccourcir une page « Solution de maintenance prédictive pour l’industrie » en un sobre « Maintenance prédictive ». Cette dissociation renforce la lisibilité sans toucher au contenu ni au SEO de la page elle-même.

Vient ensuite l’attribut de titre, qui affiche une infobulle au survol. Son usage a perdu de l’importance avec le mobile, mais il reste pertinent pour quelques précisions discrètes. Beaucoup plus intéressant, le champ Classes CSS donne la possibilité de cibler graphiquement certains éléments. En assignant par exemple une classe « menu-cta » à un bouton « Demander un devis », on peut le styliser dans la feuille de style sans toucher aux autres liens.

Sur les thèmes FSE, cette finesse passe largement par les onglets Styles et Réglages du bloc Navigation. On y ajuste couleurs, typographies, espacements, animation de survol. Un sous-menu peut ainsi adopter un fond légèrement contrasté, des bordures fines ou une police un peu plus petite que le menu principal, tout en restant cohérent avec le système global du site. Ces choix ne sont pas purement esthétiques, ils aident aussi à baliser visuellement la hiérarchie.

Côté accessibilité, quelques bonnes pratiques s’imposent. Les menus déroulants doivent pouvoir se parcourir au clavier, sans piège de focus. L’usage d’attributs ARIA contribue à cet objectif. Par exemple, un bouton qui contrôle un sous-menu pourra prendre aria-expanded= »true » lorsqu’il est ouvert et « false » lorsqu’il est refermé. La page en cours se verra souvent marquée par aria-current= »page ». Ces détails techniques, bien configurés dans le thème, changent la vie des utilisateurs qui naviguent avec un lecteur d’écran ou qui évitent la souris.

Claire a aussi découvert que certains comportements se réglaient au niveau du thème, pas seulement du menu. Le passage en menu burger sur mobile se configure dans les options du bloc Navigation, avec parfois la possibilité de choisir le point de bascule (largeur d’écran). Sur un site chargé en rubriques, déplacer ce seuil peut soulager l’affichage sur les tablettes en mode paysage.

Pour les sites très riches en médias, une autre piste mérite l’attention : déplacer les fichiers volumineux sur un sous-domaine dédié aux images ou documents. Combiné à une structure de menu claire, ce type de réglages améliore le temps de chargement et, par ricochet, l’expérience ressentie lors de l’ouverture des menus déroulants. Dans certains cas, ce simple travail de performance a réduit suffisamment le temps d’affichage pour faire disparaître les micro-latences perçues lors de l’ouverture des sous-menus.

Dernier point pour un site à jour : suivre les évolutions de WordPress, par exemple au travers d’analyses comme ce décryptage des nouveautés de WordPress 6.8.1. Ces versions apportent souvent des ajustements sur les blocs de navigation, la gestion responsive ou les réglages d’accessibilité. Ne pas en tenir compte, c’est se priver d’améliorations déjà intégrées dans le cœur de l’outil.

Un sous-menu bien réglé ne se remarque presque pas. Et c’est justement ce qui fait sa qualité : il laisse la place au contenu, pas à l’interface.

Tester, ajuster et faire vivre la navigation WordPress dans la durée

Une fois les sous-menus en place, beaucoup de sites restent figés. Pourtant, la navigation mérite le même soin itératif que le reste de l’expérience digitale. Claire l’a constaté après quelques semaines : certains liens de son sous-menu « Solutions » restaient très peu cliqués, tandis que des contenus enterrés dans une rubrique secondaire généraient des demandes commerciales. Plutôt que de s’en étonner, elle a décidé de faire évoluer sa structure du menu.

La première étape consiste à instrumenter. Les outils d’analytics ne mesurent pas toujours les clics de navigation nativement. Un marquage léger, via un plan de taggage propre, permet de suivre quels éléments de menu et de sous-menu sont réellement utilisés. On distingue alors les entrées « d’appel » qui amènent beaucoup de trafic et les impasses presque jamais utilisées. Cette observation nourrit ensuite les choix de simplification.

Pour un site vitrine de PME, l’objectif n’est pas d’avoir un maximum d’éléments dans les menus déroulants, mais d’aligner la navigation avec les priorités business du moment. Lors d’un lancement produit, il peut être pertinent de faire remonter temporairement une entrée dédiée dans un sous-menu, puis de la replacer plus bas une fois la campagne terminée. L’avantage de WordPress est justement de rendre ces ajustements accessibles depuis le tableau de bord, sans repasser par une phase de développement.

On peut aussi organiser des tests basiques, sans usine à gaz. Par exemple, déplacer une page de référence depuis un sous-menu vers une entrée directe de menu principal pendant trois semaines, puis comparer les métriques. Ou encore, regrouper plusieurs liens peu utilisés dans une seule page de synthèse, tandis que le sous-menu ne conserve que les destinations réellement stratégiques. Ces tests ne demandent souvent qu’une dizaine de minutes, mais ils éclairent les arbitrages futurs.

Autre réflexe utile : vérifier la cohérence entre la structure du menu et les contenus produits au fil du temps. Un blog technique qui ajoute régulièrement de nouvelles thématiques peut voir son sous-menu « Ressources » devenir un fourre-tout illisible. Dans ces cas, il vaut mieux réorganiser par grandes familles (guides, études de cas, événements) et ne garder que quelques entrées dans le sous-menu. Tout le reste se redistribue à l’intérieur des pages elles-mêmes grâce aux liens internes.

Enfin, la navigation doit rester cohérente avec l’évolution de WordPress et des thèmes. Un site migré vers un thème FSE bénéficiera de nouveaux réglages pour les menus déroulants, mais peut aussi perdre certaines personnalisations anciennes si rien n’est anticipé. Avant une refonte, documenter l’état actuel des menus et des sous-menus, en capturant l’arborescence et les classes CSS spécifiques, évite de repartir de zéro et de recréer des erreurs déjà corrigées auparavant.

À la fin, la question à se poser régulièrement ressemble à celle qu’on pose en visitant une exposition : est-ce que le visiteur comprend où il se trouve et où il peut aller ensuite ? Si la réponse est oui, la structure du menu et ses sous-menus jouent correctement leur rôle de fil conducteur.

Comment savoir si mon thème WordPress gère les sous-menus via l’éditeur ou via Apparence > Menus ?

Ouvrez votre tableau de bord et regardez la section Apparence. Si l’entrée « Éditeur » est présente, votre thème utilise l’édition complète du site et les sous-menus se gèrent via le bloc Navigation dans l’Éditeur de site. S’il n’y a pas d’« Éditeur », vous travaillez avec un thème classique et la gestion passe par Apparence > Menus ou par l’outil de personnalisation.

Combien de niveaux de sous-menu peut-on utiliser sans nuire à l’ergonomie ?

Sur la plupart des sites, il est recommandé de se limiter à deux niveaux : un menu principal et un sous-menu. Un troisième niveau devient vite difficile à parcourir, surtout sur mobile. Si vous avez beaucoup de profondeur de contenu, mieux vaut créer des pages de synthèse qui relaient ensuite vers des contenus plus détaillés.

Comment créer un élément de menu non cliquable pour servir uniquement de parent de sous-menu ?

Ajoutez un lien personnalisé et saisissez le symbole # dans le champ URL. Renseignez ensuite le texte à afficher (par exemple « Solutions ») puis enregistrez. Sur les thèmes classiques, cette option se trouve dans Apparence > Menus, dans la section Liens personnalisés. Sur les thèmes FSE, vous ajoutez un lien personnalisé directement dans le bloc Navigation. Le parent pourra alors ouvrir un sous-menu sans rediriger vers une page.

Comment améliorer l’accessibilité de mes sous-menus WordPress ?

Choisissez un thème qui gère correctement la navigation clavier et les attributs ARIA. Vérifiez que les liens sont atteignables avec la touche Tab, que les états de focus sont visibles et que les sous-menus peuvent s’ouvrir sans souris. Si vous développez un thème sur mesure, utilisez aria-expanded sur les déclencheurs de sous-menus et aria-current sur la page active. Un contraste suffisant entre texte et fond reste également essentiel.

Dois-je souvent modifier la structure de mon menu et de mes sous-menus ?

Il n’est pas nécessaire de changer la structure tous les mois, mais un audit annuel est recommandé. Analysez les clics sur les éléments de menu, repérez ceux qui ne sont presque jamais utilisés et simplifiez. Lors de temps forts (nouveau produit, campagne, événement), faites parfois remonter temporairement une entrée dans le menu ou un sous-menu, puis revenez à une structure plus sobre une fois la période passée.