Comment faire un menu déroulant sur WordPress (guide complet)

Introduction

Créer un menu déroulant sur WordPress est l’un des meilleurs moyens d’organiser le contenu de votre site de manière claire, intuitive et professionnelle. Un menu bien structuré aide vos visiteurs à trouver rapidement ce qu’ils cherchent, tout en améliorant la structure interne de votre site pour les moteurs de recherche.

Les menus déroulants (ou menus avec sous-menus) permettent d’afficher, sous un mêmeélément principal, plusieurs pages, catégories, articles ou liens personnalisés. Sur ordinateur, les sous-menus apparaissent souvent au survol de la souris ou au clic, tandis que sur mobile ils se déploient généralement au toucher.

Dans ce guide complet, vous allez apprendre, étape parétape, comment créer un menu déroulant sur WordPress :

• avec l’interface native Apparence → Menus (thèmes classiques) ;
• avec l’éditeur de site et le bloc Navigation (thèmes blocs / FSE) ;
• avec un plugin de mega menu pour des menus avancés ;
• avec quelques bases techniques pour les développeurs de thèmes.

Nous verronségalement les bonnes pratiques UX et SEO à appliquer pour que votre menu déroulant soit à la fois agréable à utiliser, performant etévolutif.

Concepts clés

Avant de passer à la pratique, il est important de bien comprendre quelques notions essentielles liées aux menus WordPress.

Structure hiérarchique des menus

Les menus WordPress sont structurés sous forme d’arborescence. On distingue :

• les éléments parents (ouéléments de premier niveau) : ce sont leséléments visibles dans le menu principal ;
• les éléments enfants (ou sous-éléments, sous-menus) : ce sont leséléments imbriqués sous un parent, qui s’affichent dans le menu déroulant.

Un menu déroulant n’est donc rien d’autre qu’un ensemble d’éléments enfants placés sous unélément parent. Dans l’interface WordPress classique, cette hiérarchie se gère simplement par un système de glisser-déposer : en décalant unélément légèrement vers la droite sous un autre, on indique qu’il devient un sous-menu de cetélément.

Types de contenu que l’on peut ajouter à un menu déroulant

Contrairement à une idée reçue, un menu déroulant WordPress ne se limite pas aux pages. Vous pouvez y intégrer plusieurs types de contenu natifs :

• Pages (Accueil, À propos, Services, Contact, etc.) ;
• Articles spécifiques (par exemple un article pilier ou une promotion) ;
• Catégories d’articles (Blog, Actualités, Tutoriels, etc.) ;
• Étiquettes (tags), selon la configuration de votre site ;
• Liens personnalisés, par exemple vers un autre site, une ressource externe ou une ancre interne.

Selon les thèmes et les plugins, vous pouvez parfois ajouter aussi des types de contenus personnalisés (produits WooCommerce, événements, portfolios, etc.).

Thèmes et support des menus déroulants

La plupart des thèmes WordPress modernes prennent nativement en charge les menus déroulants. Cependant :

• plus les thèmes sont travaillés, plus ils proposent de styles et d’animations (effet de glissement, ombres, colonnes, icônes, etc.) ;
• certains thèmes minimalistes ou très personnalisés peuvent nécessiter quelques ajustements CSS pour un rendu parfait ;
• l’emplacement du menu (en-tête, pied de page, barre latérale, menu mobile) dépend entièrement du thème actif.

Pour vérifier les possibilités de votre thème, consultez sa documentation ou la section Apparence → Personnaliser, ainsi que la page Apparence → Menus ou Apparence → Éditeur

Thèmes classiques vs thèmes blocs (éditeur complet de site)

Depuis les versions récentes de WordPress, on distingue deux grandes familles de thèmes :

• les thèmes classiques : menus gérés principalement via Apparence → Menus ;
• les thèmes blocs (FSE – Full Site Editing) : menus gérés via Apparence → Éditeur à l’aide du bloc Navigation.

Les deux approches permettent de créer des menus déroulants, mais l’interface est différente. Ce guide couvre les deux cas pour que vous puissiez suivre, quel que soit votre thème.

Plugins et solutions tierces

Si vous avez besoin de fonctionnalités avancées (mega menu, colonnes, icônes, badges, images, formulaires dans le menu, conditions d’affichage, etc.), il est possible d’utiliser des plugins spécialisés de menus, par exemple :

• Max Mega Menu ;
• ou d’autres plugins de mega menu disponibles dans le répertoire officiel.

Ces plugins ne sont pas obligatoires pour créer un simple menu déroulant : WordPress sait le faire nativement. Ils deviennent utiles lorsque vous souhaitez un menu extrêmement riche, avec de nombreuses colonnes ou un design très spécifique.

Comment créer un menu déroulant avec Apparence → Menus (thèmes classiques)

Si votre site utilise un thème classique, la méthode standard pour créer un menu déroulant passe par la page Apparence → Menus dans l’administration WordPress.

Étape 1 : accéder à l’interface de menus

Connectez-vous à votre tableau de bord WordPress, puis :

• cliquez sur Apparence dans le menu de gauche ;
• puis sur Menus.

Vous arrivez sur l’écran d’édition des menus, avec deux zones principales :

• la zone Structure du menu, au centre, où vous verrez leséléments actuels du menu ;
• la colonne Ajouter deséléments de menu à gauche, qui liste les Pages, Articles, Catégories, Liens personnalisés, etc.

Étape 2 : créer un nouveau menu

Si aucun menu n’est encore créé, vous verrez un champ permettant de saisir un nom de menu. Saisissez par exemple :

Menu principal, Menu principal déroulant ou un nom explicite pour vous.

Cliquez ensuite sur le bouton Créer le menu. WordPress crée alors un nouveau menu, dans lequel vous allez ajouter et organiser voséléments.

Étape 3 : ajouter deséléments au menu

Dans la colonne de gauche, vous pouvez maintenant sélectionner les contenus à ajouter à votre menu :

• cochez les Pages que vous souhaitez afficher ;
• développez la section Articles si vous voulez mettre en avant un article précis ;
• ouvrez la section Catégories pour ajouter des rubriques d’articles ;
• utilisez Liens personnalisés pour créer un lien vers une URL de votre choix (interne ou externe).

Une fois voséléments sélectionnés, cliquez sur Ajouter au menu. Ils apparaissent alors dans la zone Structure du menu sous forme de blocs réordonnables.

Étape 4 : organiser le menu et créer les sous-menus

Par défaut, tous leséléments nouvellement ajoutés se placent au même niveau. Pour transformer ce menu « plat » en menu déroulant :

• déplacez leséléments en glisser-déposer pour les mettre dans l’ordre souhaité ;
• pour créer un sous-menu, prenez unélément avec la souris et décalez-le légèrement vers la droite sous unélément parent.

WordPress affiche alors un label du type « Sous-élément de … », ce qui signifie que l’élément est devenu un enfant de l’élément parent qui se trouve juste au-dessus. Répétez l’opération pour créer autant de sous-menus que nécessaire.

Vous pouvez imbriquer plusieurs niveaux (sous-sous-menu) si votre thème le supporte, même si, en pratique, il est recommandé de limiter la profondeur pour ne pas compliquer la navigation.

Étape 5 : définir l’emplacement du menu

Une fois la structure de votre menu déroulant en place, vous devez l’assigner à un emplacement proposé par votre thème. Dans la section Paramètres du menu ou Gérer les emplacements, vous verrez généralement des options comme :

• Menu principal ou Menu de l’en-tête ;
• Menu secondaire ;
• Menu du pied de page ;
• éventuellement des emplacements spécifiques au thème (menu mobile, menu hors-canvas, etc.).

Cochez l’emplacement le plus pertinent, par exemple Menu principal pour l’afficher dans l’en-tête de votre site, puis cliquez sur Enregistrer le menu.

Étape 6 : vérifier le rendu du menu déroulant

Visitez maintenant la partie publique de votre site (front-end) :

• passez la souris sur l’élément parent dans la barre de navigation ;
• vos sous-menus doivent apparaître sous forme de menu déroulant.

Si rien ne se déroule ou si le rendu estétrange, vérifiez :

• que vous avez bien créé une hiérarchie (éléments enfants légèrement décalés à droite) ;
• que votre thème gère les sous-menus ;
• qu’aucun plugin ou code personnalisé ne vient interférer avec le CSS ou le JavaScript du menu.

Comment créer un menu déroulant avec l’éditeur de site (bloc Navigation)

Si votre site utilise un thème bloc (Full Site Editing), la gestion des menus ne se fait plus via Apparence → Menus, mais via l’éditeur de site.

Étape 1 : accéder à l’éditeur de site

Dans votre tableau de bord WordPress :

• allez dans Apparence → Éditeur ;
• ouvrez le modèle qui contient votre en-tête (souvent « En-tête » ou le modèle de page qui affiche le header).

Étape 2 : insérer ou modifier un bloc Navigation

Dans l’éditeur de modèles, repérez le bloc Navigation existant dans l’en-tête. S’il n’existe pas encore :

• cliquez sur le bouton + pour ajouter un bloc ;
• recherchez et insérez le bloc Navigation.

Vous pouvez choisir un menu existant ou en créer un nouveau directement depuis ce bloc.

Étape 3 : ajouter deséléments et sous-menus

Pour créer votre menu déroulant avec le bloc Navigation :

• cliquez sur le bloc Navigation pour afficher ses options ;
• ajoutez de nouveauxéléments au menu (liens, pages, catégories, etc.) à l’aide de l’icône + ;
• pour créer un sous-menu, sélectionnez unélément de menu, puis utilisez l’option d’ajout de sous-menu proposée par l’interface ;
• vous pouvezégalement faire glisser unélément sous un autre pour l’imbriquer, selon la version de l’éditeur.

Chaqueélément peutêtre configuré : titre du lien affiché, URL, éventuelle description ou icône (selon le thème et les blocs disponibles).

Étape 4 : enregistrer et tester

Une fois votre structure de menu déroulant terminée, cliquez sur Enregistrer dans l’éditeur de site. Retournez sur le front-end et testez le comportement du menu sur ordinateur et sur mobile.

Utiliser un plugin de mega menu pour des menus avancés

Pour la plupart des sites, les fonctionnalités natives de WordPress sont suffisantes pour créer un menu déroulant clair et efficace. Toutefois, si vous avez un site volumineux (e-commerce, portail d’actualités, plateforme de formation, etc.), un plugin de mega menu peut s’avérer utile.

Quand utiliser un plugin de menu déroulant avancé ?

Un plugin de mega menu est particulièrement adapté si vous souhaitez :

• afficher de nombreuses colonnes dans votre menu ;
• ajouter des images, icônes, badges « Nouveau » ou « Promo », ou des descriptions détaillées ;
• insérer des widgets (formulaire de recherche, formulaire de contact, produits récents, etc.) dans vos menus ;
• gérer des conditions d’affichage avancées (par exemple montrer certainséléments uniquement aux utilisateurs connectés).

Exemple : Max Mega Menu

Un des plugins populaires pour créer des menus déroulants avancés est Max Mega Menu. Son principe d’utilisation est généralement le suivant :

• installer et activer le plugin depuis Extensions → Ajouter ;
• associer le plugin à un emplacement de menu dans Apparence → Menus ou depuis le panneau de configuration du plugin ;
• personnaliser le style du menu, le nombre de colonnes, l’affichage des icônes, etc. ;
• utiliser la même interface de glisser-déposer pour créer la hiérarchie de sous-menus, mais avec davantage d’options visuelles.

Ce type de plugin vient compléter les fonctionnalités natives : il ne remplace pas le principe de base des menus WordPress (structure hiérarchique, emplacements de menu), il les enrichit.

Bonnes pratiques pour un menu déroulant efficace

Un menu peutêtre techniquement bien construit, mais peu efficace pour l’utilisateur ou confus pour les moteurs de recherche. Voici quelques bonnes pratiques à respecter.

Optimiser les intitulés de menu

Les intitulés de voséléments de menu doiventêtre à la fois :

• clairs pour l’utilisateur : compréhensibles en une seconde ;
• représentatifs du contenu de la page ciblée ;
• cohérents avec le vocabulaire de votre audience.

Évitez les intitulés trop vagues (« Divers », « En savoir plus ») et préférez des termes descriptifs comme « Services », « Formations en ligne », « Ressources gratuites », « Blog SEO », etc. Cela aide aussi les moteurs de recherche à mieux comprendre la structure de votre site.

Améliorer la structure et la profondeur du menu

Pour que votre menu déroulant reste lisible et performant :

• limitez le nombre d’éléments de premier niveau pour ne pas surcharger la barre de navigation ;
• regroupez logiquement les pages dans des catégories claires (par exemple : « Entreprise », « Services », « Ressources », « Contact ») ;
• évitez de multiplier les sous-niveaux (sous-sous-sous-menus), qui sont difficiles à utiliser, surtout sur mobile ;
• pour un blog, utilisez les catégories commeéléments parents, avecéventuellement des sous-catégories ou des pages pilier en sous-menu.

Créer du contenu de qualité derrière chaqueélément

Un menu déroulant n’a de valeur que si les pages qu’il met en avant sont utiles et bien construites. Pour chaqueélément de menu important :

• optimisez le titre de la page et la balise title ;
• rédigez un contenu structuré avec des sous-titres clairs ;
• ajoutez des liens internes pertinents pour renforcer le maillage du site ;
• veillez à la cohérence entre l’intitulé de menu et le contenu réel de la page.

Prise en compte du mobile (responsive)

La majorité des thèmes modernes transforment automatiquement le menu principal en menu hamburger sur mobile : un bouton (souvent trois barres horizontales) qui, lorsqu’on clique dessus, affiche le menu verticalement. Les sous-menus se déploient alors généralement via une petite flèche ou au toucher de l’élément parent.

Pour garantir une bonne expérience utilisateur sur mobile :

• testez systématiquement votre menu sur smartphone et tablette ;
• vérifiez que leséléments de menu sont facilement cliquables (taille adéquate) ;
• assurez-vous que les sous-menus sont lisibles et ne se chevauchent pas ;
• évitez les intitulés trop longs qui risquent de passer sur plusieurs lignes.

Performance et accessibilité

Un menu déroulant bien conçu doit aussiêtre :

• rapide à charger : évitez d’y intégrer deséléments lourds (images non optimisées, scripts inutiles) ;
• accessible au clavier : les utilisateurs doivent pouvoir naviguer dans le menu avec la touche Tabulation ;
• compatible avec les lecteurs d’écran : leséléments de navigation doiventêtre balisés correctement.

La plupart des thèmes récents respectent ces critères de base, mais si vous développez un thème sur mesure, il est important de les garder à l’esprit.

Outils et ressources utiles pour gérer vos menus déroulants

Plusieurs outils peuvent vous aider à analyser et optimiser l’efficacité de votre menu déroulant sur WordPress.

• Google Search Console : pour surveiller l’indexation de vos pages, analyser la structure de vos liens internes et détecter d’éventuels problèmes d’ergonomie mobile.
• Google Analytics (ou une solution d’analyseéquivalente) : pour suivre le comportement des utilisateurs, mesurer les pages les plus consultées, identifier leséventuels points de sortie etévaluer l’impact de vos modifications de menu.
• Plugins de menus avancés (comme Max Mega Menu) : pour ajouter des fonctionnalités visuelles ou structurelles supplémentaires si votre site le nécessite.
• Éditeur de thème (ouéditeur de fichiers via un client FTP ou le gestionnaire de fichiers de votre hébergeur) : pour personnaliser le CSS et le JavaScript, dans la mesure du possible via un thème enfant afin de ne pas perdre vos modifications lors des mises à jour.

Personnaliser l’apparence d’un menu déroulant

Une fois votre menu déroulant fonctionnel, vous pouvez vouloir adapter son apparence à votre charte graphique.

Personnalisation via le personnalisateur de thème

De nombreux thèmes permettent de modifier les couleurs, les polices et parfois le comportement du menu depuis Apparence → Personnaliser. Vous pouvez souvent :

• changer la couleur de fond de la barre de navigation ;
• modifier la couleur du texte, du survol et des liens actifs ;
• ajuster l’espacement entre leséléments de menu ;
• sélectionner un style spécifique pour les sous-menus.

Personnalisation via CSS

Pour aller plus loin, vous pouvez ajouter du CSS personnalisé. Le plus souvent, cela se fait via :

• la section CSS additionnel dans Apparence → Personnaliser ;
• ou le fichier style.css de votre thème enfant.

Par exemple, vous pouvez :

• modifier l’ombre portée du sous-menu ;
• changer l’animation d’apparition (fade-in, slide-down) ;
• adapter la largeur des blocs du sous-menu.

Avant toute modification, identifiez les classes CSS utilisées par votre thème (via les outils de développement de votre navigateur) afin de cibler précisément les bonséléments.

Pour les développeurs : créer et afficher des emplacements de menus

Si vous développez ou personnalisez un thème WordPress, vous pouvez déclarer vos propres emplacements de menus et les afficher dans vos modèles.

Déclarer un emplacement de menu

Dans le fichier functions.php de votre thème (de préférence un thème enfant), vous pouvez enregistrer un ou plusieurs emplacements de menus avec la fonction register_nav_menus. Par exemple :

function mon_theme_enregistrer_menus { register_nav_menus( array( 'menu-principal' => 'Menu principal', 'menu-footer' => 'Menu du pied de page', ) );
}
add_action( 'after_setup_theme', 'mon_theme_enregistrer_menus' );

Ces emplacements apparaîtront ensuite dans Apparence → Menus dans la section Gérer les emplacements.

Afficher un menu dans un template

Pour afficher un menu dans votre en-tête, par exemple dans header.php, utilisez la fonction wp_nav_menu :

WordPress se chargera d’injecter la structure HTML du menu, y compris les listes imbriquées pour les sous-menus. Vous pourrez ensuite styliser ceséléments avec du CSS.

Foire aux questions (FAQ)

Trouvez ici des réponses aux questions les plus fréquentes concernant la création d’un menu déroulant sur WordPress.

Puis-je créer un menu déroulant sans plugin ?

Oui, vous pouvez tout à fait créer un menu déroulant sans plugin supplémentaire. WordPress intègre nativement la gestion des sous-menus :

• via Apparence → Menus pour les thèmes classiques ;
• via le bloc Navigation dans Apparence → Éditeur pour les thèmes blocs.

Les plugins ne sont nécessaires que si vous avez des besoins graphiques ou fonctionnels très avancés (mega menus, colonnes, widgets dans le menu, etc.).

Comment personnaliser l’apparence d’un menu déroulant ?

Vous pouvez personnaliser l’apparence de votre menu déroulant de plusieurs façons :

• en utilisant les options de votre thème dans Apparence → Personnaliser (couleurs, polices, tailles, etc.) ;
• en ajoutant du CSS personnalisé via la section « CSS additionnel » ou dans le fichier style.css de votre thème enfant ;
• en utilisant un plugin de mega menu qui offre une interface de personnalisation avancée.

Les menus déroulants sont-ils compatibles avec les appareils mobiles ?

Oui, les menus déroulants sont compatibles avec les appareils mobiles, à condition que votre thème soit responsive. Sur mobile, le menu principal est généralement transformé en menu hamburger, et les sous-menus se déploient au toucher. Il est toutefois important de tester le comportement du menu sur différents appareils et navigateurs pour s’assurer que l’expérience utilisateur reste fluide.

Quelle est la différence entre un menu déroulant et un menu hamburger ?

Un menu déroulant décrit la façon dont les sous-éléments apparaissent sous unélément parent : au survol ou au clic, un sous-menu s’affiche vers le bas (ou latéralement). C’est une notion de structure et de comportement.

Un menu hamburger, quant à lui, est un mode d’affichage du menu, principalement sur mobile : le menu est caché derrière une icône (souvent trois lignes horizontales), et s’affiche lorsque l’utilisateur clique sur cette icône. À l’intérieur de ce menu hamburger, vous pouvez tout à fait avoir des sous-menus déroulants.

Dois-je obligatoirement utiliser un plugin pour créer un menu déroulant ?

Non, l’utilisation d’un plugin n’est pas obligatoire pour créer un menu déroulant. Les fonctionnalités natives de WordPress couvrent la grande majorité des besoins. Les plugins sont utiles si vous souhaitez pousser très loin la mise en forme (mega menu complexe, design très personnalisé) ou ajouter des fonctionnalités spécifiques.

Puis-je ajouter uniquement des pages dans un menu déroulant ?

Non, vous n’êtes pas limité aux pages. Vous pouvez ajouter des pages, des articles, des catégories, des liens personnalisés et, selon la configuration de votre site, d’autres types de contenus personnalisés (produits, événements, etc.). Tout ce qui peutêtre ajouté au menu peutêtre placé dans un sous-menu.

Que faire si mon thème ne gère pas correctement les menus déroulants ?

Si votre thème n’affiche pas correctement les sous-menus ou s’il ne propose pas le style désiré :

• vérifiez d’abord qu’il s’agit bien d’un problème de style (CSS) et non de structure du menu ;
• consultez la documentation du thème pour voir si des options spécifiques existent ;
• ajoutez du CSS personnalisé pour améliorer l’apparence et le comportement ;
• si nécessaire, envisagez un changement de thème ou l’usage d’un plugin de mega menu pour contourner les limitations.

Conclusion

Créer un menu déroulant sur WordPress est uneétape essentielle pour structurer votre site, améliorer l’expérience utilisateur et renforcer votre visibilité dans les moteurs de recherche. Grâce aux outils intégrés de WordPress, vous pouvez construire un menu hiérarchisé sansécrire une seule ligne de code : il vous suffit de créer un menu, d’y ajouter voséléments et de les organiser en parents et enfants.

Qu’il s’agisse d’un site vitrine, d’un blog ou d’une boutique en ligne, un menu déroulant clair et logique aide vos visiteurs à comprendre en un coup d’œil l’architecture de votre site et les incite à explorer davantage de contenus. En combinant une bonne organisation, des intitulés pertinents, un design responsive et, si besoin, quelques personnalisations CSS ou l’usage d’un plugin de mega menu, vous pouvez obtenir un système de navigation à la fois esthétique, performant et durable.

N’hésitez pas à tester différentes configurations, à analyser le comportement de vos utilisateurs avec des outils d’analyse et à faireévoluer votre menu au fur et à mesure que votre site s’enrichit. Un menu déroulant bien pensé est un véritable levier pour la qualité de l’expérience utilisateur et la performance globale de votre site WordPress.