La navigation d’un site web repose en grande partie sur la qualité de son menu. Créer un menu déroulant sur WordPress sans plugin est tout à fait possible grâce aux fonctionnalités natives du CMS, sans avoir à installer la moindre extension. Cette approche présente un avantage concret : alléger le site, réduire les risques de conflits entre plugins et garder un contrôle total sur la structure de navigation. Que vous gériez un blog, une boutique ou un site vitrine, un menu bien structuré améliore l’expérience utilisateur et facilite l’indexation par les moteurs de recherche. Ce guide détaille chaque étape, de la configuration dans le tableau de bord WordPress jusqu’aux ajustements CSS pour personnaliser l’affichage.
Ce que les menus déroulants apportent concrètement à votre site
Un menu déroulant est un élément d’interface qui masque des sous-catégories jusqu’à ce que l’utilisateur survole ou clique sur un élément parent. Sur un site WordPress, cette organisation hiérarchique permet de regrouper des pages connexes sans encombrer la barre de navigation principale. Un visiteur qui arrive sur un site e-commerce trouvera plus facilement ses produits si les catégories se déploient au survol plutôt que d’occuper une ligne entière.
Au-delà de l’ergonomie, la structure hiérarchique des menus envoie des signaux clairs aux robots d’exploration de Google. Les pages enfants héritent d’une relation sémantique avec leur page parente, ce qui renforce la cohérence thématique du site. Un menu bien construit participe donc indirectement au référencement naturel, sans nécessiter de configuration supplémentaire.
Beaucoup de propriétaires de sites WordPress ajoutent des plugins de navigation par réflexe, alors que le cœur du CMS gère nativement les menus à plusieurs niveaux depuis la version 3.0. Cette capacité native est souvent sous-exploitée. Si vous envisagez de restructurer entièrement votre arborescence, sachez que les professionnels qui travaillent pour réaliser la refonte d’un site Worpress s’appuient systématiquement sur cette fonctionnalité avant d’envisager des solutions tierces.
La WordPress Foundation maintient le Codex, la documentation officielle du CMS, qui décrit en détail l’API des menus de navigation. S’y référer permet de comprendre les limites et les possibilités du système avant de se lancer dans des personnalisations avancées.
Guide pas-à-pas pour créer un menu déroulant sans plugin sur WordPress
La création d’un menu déroulant sur WordPress passe par l’interface d’administration, sans écrire une seule ligne de code dans un premier temps. Voici les étapes à suivre dans l’ordre :
- Accéder à Apparence > Menus dans le tableau de bord WordPress
- Créer un nouveau menu en lui donnant un nom explicite (ex. : « Menu principal »)
- Ajouter les pages, catégories ou liens personnalisés souhaités via le panneau de gauche
- Glisser-déposer les éléments pour les imbriquer les uns sous les autres et créer la hiérarchie
- Décaler légèrement vers la droite les éléments qui doivent devenir des sous-menus
- Attribuer le menu à un emplacement défini par le thème actif (ex. : « Menu principal », « Top Navigation »)
- Enregistrer le menu
L’imbrication des éléments est la clé du mécanisme. Quand vous glissez un élément sous un autre et le décalez vers la droite dans l’interface de gestion des menus, WordPress l’enregistre comme enfant de l’élément au-dessus. Cette relation parent-enfant génère automatiquement le balisage HTML nécessaire, avec des balises <ul> imbriquées dans la liste de navigation.
Vérifiez que votre thème déclare bien des emplacements de menu dans son fichier functions.php. La fonction registernavmenus() doit y apparaître. Si ce n’est pas le cas, votre thème ne supporte pas nativement les menus WordPress et il faudra l’ajouter manuellement ou choisir un autre thème.
Ajouter le support des menus dans un thème personnalisé
Si vous développez ou modifiez un thème sur mesure, ouvrez le fichier functions.php et ajoutez ce bloc :
addthemesupport( 'menus' ); suivi de registernavmenus( array( 'primary' => __( 'Menu principal', 'votre-theme' ) ) );
Ensuite, dans le fichier header.php, appelez le menu avec la fonction wpnavmenu() en précisant le thème de localisation correspondant. Cette approche donne un contrôle complet sur l’emplacement et la structure HTML générée.
Personnaliser l’apparence du menu déroulant avec le CSS
WordPress génère automatiquement le HTML du menu, mais l’affichage du sous-menu dépend entièrement du CSS du thème. Par défaut, de nombreux thèmes cachent les sous-menus et les affichent au survol grâce à la propriété display: none combinée à display: block sur le sélecteur :hover.
Pour personnaliser ce comportement, rendez-vous dans Apparence > Personnaliser > CSS additionnel. Voici un exemple de règle CSS minimale pour afficher un sous-menu au survol :
.menu-item:hover > .sub-menu { display: block; position: absolute; background: #ffffff; z-index: 999; }
Adaptez les valeurs de couleur, espacement et positionnement selon la charte graphique de votre site. Le z-index élevé garantit que le sous-menu s’affiche par-dessus les autres éléments de la page. Sans cette propriété, le menu peut se retrouver caché derrière un slider ou un bloc de contenu.
Gérer l’accessibilité et le comportement mobile
Sur mobile, le survol n’existe pas. Les menus déroulants purement CSS posent donc un problème d’accessibilité sur les écrans tactiles. La solution la plus propre sans plugin consiste à utiliser un petit script JavaScript natif qui bascule une classe CSS au clic sur l’élément parent.
Ajoutez un attribut tabindex="0" aux liens parents pour les rendre accessibles au clavier, et utilisez l’événement focus en plus de hover dans votre CSS. Ces ajustements permettent aux utilisateurs de lecteurs d’écran de naviguer correctement dans votre menu, ce que Google prend en compte dans ses critères d’évaluation depuis la mise à jour des Core Web Vitals.
Résoudre les problèmes fréquents sans perdre de temps
Le sous-menu n’apparaît pas au survol : vérifiez d’abord que votre thème inclut bien les styles CSS pour la classe .sub-menu. Certains thèmes légers ou minimalistes n’intègrent pas ces styles par défaut. Un rapide clic droit > Inspecter dans Chrome permet de voir si le sous-menu existe dans le DOM mais reste caché.
Les éléments du menu ne s’imbriquent pas dans l’interface d’administration : ce problème survient parfois avec les navigateurs anciens ou les extensions de blocage de scripts. Testez dans un autre navigateur ou désactivez temporairement vos extensions pour confirmer.
Le menu s’affiche en colonne verticale au lieu de s’ouvrir horizontalement : c’est une question de positionnement CSS. Ajoutez position: relative sur l’élément parent (.menu-item) et position: absolute sur le sous-menu (.sub-menu). Sans cela, le sous-menu suit le flux normal du document et pousse le contenu vers le bas.
Un conflit entre le CSS du thème et vos règles personnalisées peut aussi bloquer l’affichage. Utilisez !important avec parcimonie pour forcer certaines propriétés, mais préférez une spécificité CSS plus élevée en ciblant des sélecteurs plus précis. La communauté WordPress sur les forums officiels (fr.wordpress.org/support) documente la plupart de ces cas de figure avec des solutions testées.
Bonnes pratiques pour une navigation qui dure
Un menu déroulant bien conçu ne devrait pas dépasser deux niveaux de profondeur. Au-delà, l’utilisateur se perd et le bénéfice de la navigation hiérarchique disparaît. Si votre arborescence nécessite trois niveaux ou plus, c’est souvent le signe que la structure du site mérite une révision.
Limitez le nombre d’éléments dans chaque sous-menu à sept entrées maximum. Cette règle empirique, issue des travaux de George Miller sur la mémoire à court terme, reste pertinente en UX design. Un sous-menu de douze liens décourage la lecture et génère des erreurs de clic sur mobile.
Testez systématiquement votre menu après chaque mise à jour majeure de WordPress ou de votre thème. Les mises à jour peuvent réécrire des fichiers CSS et effacer vos personnalisations si vous avez modifié les fichiers du thème parent directement. Travaillez toujours avec un thème enfant pour conserver vos modifications lors des mises à jour.
Enfin, auditez régulièrement les liens de votre menu. Des pages supprimées ou des URLs modifiées génèrent des erreurs 404 qui nuisent à l’expérience utilisateur et au référencement. Le plugin Broken Link Checker reste une exception acceptable ici : son usage ponctuel justifie l’installation temporaire pour un audit complet, avant désinstallation.