{"id":36537,"date":"2020-01-31T02:36:51","date_gmt":"2020-01-31T10:36:51","guid":{"rendered":"https:\/\/kinsta.com\/?post_type=knowledgebase&#038;p=66027"},"modified":"2025-10-01T20:50:22","modified_gmt":"2025-10-01T19:50:22","slug":"menu-deroulant-wordpress","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/","title":{"rendered":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)"},"content":{"rendered":"<p>La navigation sur le site est essentielle pour aider vos utilisateurs \u00e0 se rendre l\u00e0 o\u00f9 ils veulent aller. Un menu bien con\u00e7u peut grandement contribuer \u00e0 am\u00e9liorer l&rsquo;exp\u00e9rience de l&rsquo;utilisateur (UX), et m\u00eame <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-reduire-le-taux-de-rebond\/\">\u00e0 diminuer votre taux de rebond<\/a>. Cependant, une navigation mal con\u00e7ue peut faire tout le contraire.<\/p>\n<p>Heureusement, WordPress vous permet de <a href=\"https:\/\/kinsta.com\/fr\/blog\/personnaliser-menu-wordpress\/\">cr\u00e9er des menus personnalis\u00e9s<\/a> pour r\u00e9pondre aux besoins de votre site. Vous pouvez m\u00eame utiliser les fonctions natives pour ajouter un menu WordPress d\u00e9roulant compact qui permet de gagner de l&rsquo;espace tout en offrant une orientation claire \u00e0 vos visiteurs.<\/p>\n<p>Dans cet article, nous allons voir pourquoi la navigation sur les sites web est importante et comment les menus d\u00e9roulants peuvent \u00eatre particuli\u00e8rement utiles. Nous vous expliquerons ensuite comment les cr\u00e9er dans WordPress, et nous vous ferons part de quelques extensions qui peuvent vous aider.<\/p>\n<p>Plongeons dans le vif du sujet !<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Une introduction \u00e0 la navigation et aux menus d\u00e9roulants de WordPress<\/h2>\n<p>Bien qu&rsquo;ils soient sans pr\u00e9tention, les menus de navigation sont un \u00e9l\u00e9ment essentiel de tout site web. Ils aident les utilisateurs \u00e0 trouver rapidement les pages les plus pertinentes pour atteindre leurs objectifs, tout en donnant aux nouveaux visiteurs une id\u00e9e de ce que vous avez \u00e0 offrir :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-navigation-principal-1.png\" alt=\"Le menu de navigation principal du site Kinsta\" width=\"1500\" height=\"112\"><figcaption class=\"wp-caption-text\">Le menu de navigation principal du site Kinsta<\/figcaption><\/figure>\n<p>Un menu de navigation bien con\u00e7u est essentiel pour stimuler les conversions et r\u00e9duire votre taux de rebond. Lorsque les utilisateurs peuvent facilement trouver les pages o\u00f9 votre produit, <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-formulaire-de-contact-wordpress\/\">votre formulaire d&rsquo;inscription par e-mail<\/a>, ou tout autre contenu de conversion est situ\u00e9, vous aurez plus de facilit\u00e9 \u00e0 les faire acheter ou \u00e0 les faire s\u2019inscrire.<\/p>\n<p>De plus, si les utilisateurs peuvent s&rsquo;orienter en toute confiance sur votre site, ils n&rsquo;auront pas \u00e0 rebondir sur vos pages parce qu&rsquo;elles se sont retrouv\u00e9es au mauvais endroit. En les aidant \u00e0 faire les choses correctement du premier coup, on peut \u00e0 la fois am\u00e9liorer l\u2019UX et r\u00e9duire les frustrations.<\/p>\n<p>Dans WordPress, les menus sont une fonctionnalit\u00e9 inh\u00e9rente. Tout site cr\u00e9\u00e9 avec la plateforme peut afficher un ou plusieurs d&rsquo;entre eux. Cependant, <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-wordpress-plus-rapide\/\">les th\u00e8mes WordPress<\/a> jouent \u00e9galement un r\u00f4le important lorsqu&rsquo;il s&rsquo;agit de concevoir et de placer votre ou vos menus.<\/p>\n<p>Pour cette raison, votre menu WordPress peut prendre de nombreuses formes diff\u00e9rentes. Le plus connu est le menu d&rsquo;en-t\u00eate standard :<\/p>\n<figure id=\"attachment_44312\" aria-describedby=\"caption-attachment-44312\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-44312 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/header-menu-exemple-1.jpg\" alt=\"Un exemple de menu d'en-t\u00eate typique\" width=\"1500\" height=\"618\" srcset=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/header-menu-exemple-1.jpg 1500w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/header-menu-exemple-1-300x124.jpg 300w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/header-menu-exemple-1-1024x422.jpg 1024w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/header-menu-exemple-1-768x316.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><figcaption id=\"caption-attachment-44312\" class=\"wp-caption-text\">Un exemple de menu d&rsquo;en-t\u00eate typique<\/figcaption><\/figure>\n<p>Vous pouvez aussi souvent inclure un menu de pied de page suppl\u00e9mentaire au bas de vos pages. Il peut afficher le m\u00eame contenu que votre menu principal ou offrir des options l\u00e9g\u00e8rement diff\u00e9rentes :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/footer-menu-exemple-1.png\" alt=\"Un exemple de menu de pied de page\" width=\"1500\" height=\"391\"><figcaption class=\"wp-caption-text\">Un exemple de menu de pied de page<\/figcaption><\/figure>\n<p>Un autre style est le menu superpos\u00e9, que les utilisateurs peuvent ouvrir et fermer \u00e0 volont\u00e9 :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/superpose-menu-exemple-1.png\" alt=\"Un exemple de menu superpos\u00e9\" width=\"1500\" height=\"854\"><figcaption class=\"wp-caption-text\">Un exemple de menu superpos\u00e9<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement envisager d&rsquo;utiliser un menu lat\u00e9ral :<\/p>\n<figure id=\"attachment_44297\" aria-describedby=\"caption-attachment-44297\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-44297 size-full\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/sidebar-menu-lateral-exemple-1.jpg\" alt=\"Un exemple de menu lat\u00e9ral\" width=\"1500\" height=\"797\" srcset=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/sidebar-menu-lateral-exemple-1.jpg 1500w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/sidebar-menu-lateral-exemple-1-300x159.jpg 300w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/sidebar-menu-lateral-exemple-1-1024x544.jpg 1024w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/sidebar-menu-lateral-exemple-1-768x408.jpg 768w\" sizes=\"auto, (max-width: 1500px) 100vw, 1500px\" \/><figcaption id=\"caption-attachment-44297\" class=\"wp-caption-text\">Un exemple de menu lat\u00e9ral<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement int\u00e9grer un menu d\u00e9roulant, parfois appel\u00e9 menu \u00ab\u00a0imbriqu\u00e9\u00a0\u00bb :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/deroulant-menu-exemple-1.png\" alt=\"Un exemple de menu d\u00e9roulant\" width=\"1500\" height=\"806\"><figcaption class=\"wp-caption-text\">Un exemple de menu d\u00e9roulant<\/figcaption><\/figure>\n<p>Ce type de navigation est id\u00e9al pour de nombreux types de sites. Il n&rsquo;obscurcira pas votre contenu comme un menu superpos\u00e9 mais n&rsquo;est pas aussi intrusif qu&rsquo;une grande barre d&rsquo;en-t\u00eate ou un menu lat\u00e9ral.<\/p>\n<p>En dissimulant certains contenus jusqu&rsquo;\u00e0 ce qu&rsquo;ils soient n\u00e9cessaires, vous \u00e9conomiserez de l&rsquo;espace sur l&rsquo;\u00e9cran tout en offrant aux utilisateurs un moyen facile de se d\u00e9placer.<\/p>\n<h2>Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)<\/h2>\n<p>Si vous avez d\u00e9cid\u00e9 qu&rsquo;un menu d\u00e9roulant pourrait convenir \u00e0 votre site WordPress, il est assez simple de le mettre en place. En utilisant les fonctions natives de menu disponibles dans WordPress, vous pouvez cr\u00e9er un syst\u00e8me de navigation personnalis\u00e9 qui r\u00e9pond \u00e0 vos besoins en seulement cinq \u00e9tapes.<\/p>\n<h3>\u00c9tape 1 : Cr\u00e9er vos \u00e9l\u00e9ments de menu<\/h3>\n<p>La premi\u00e8re \u00e9tape de la cr\u00e9ation d&rsquo;un menu consiste \u00e0 d\u00e9cider de ce qu&rsquo;il doit contenir. Commencez par vous rendez sur <strong>Apparence &gt; Menus <\/strong>dans votre tableau de bord WordPress :<\/p>\n<figure style=\"width: 437px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-menu-2.png\" alt=\"WordPress menu\" width=\"437\" height=\"524\"><figcaption class=\"wp-caption-text\">Acc\u00e9der \u00e0 l&rsquo;\u00e9diteur de menu dans le tableau de bord de WordPress<\/figcaption><\/figure>\n<p>Ce que vous voyez dans l&rsquo;\u00e9diteur de menu varie l\u00e9g\u00e8rement en fonction de votre th\u00e8me.<\/p>\n<p>Cependant, ce qu&rsquo;il est important de noter pour l&rsquo;instant, c&rsquo;est la premi\u00e8re option de l&rsquo;onglet <strong>\u00ab\u00a0Modifier les menus\u00a0\u00bb. <\/strong>Vous devriez voir une option qui vous permet de s\u00e9lectionner un de vos menus existants pour le modifier, ainsi qu&rsquo;une option pour <strong>cr\u00e9er un nouveau menu<\/strong> :<\/p>\n<figure style=\"width: 662px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/creer-nouveau-menu-wordpress.png\" alt=\"Cr\u00e9er un nouveau lien de menu en haut de l'\u00e9diteur de menu WordPress\" width=\"662\" height=\"189\"><figcaption class=\"wp-caption-text\">Cr\u00e9er un nouveau lien de menu en haut de l&rsquo;\u00e9diteur de menu WordPress<\/figcaption><\/figure>\n<p>Pour cet exemple, nous allons choisir cette derni\u00e8re option et cr\u00e9er un nouveau menu. Cela implique d&rsquo;ajouter un titre et de cliquer ensuite sur le bouton \u00ab\u00a0<strong>Cr\u00e9er un menu\u00a0\u00bb :<\/strong><\/p>\n<figure style=\"width: 888px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/creer-wordpress-menu.png\" alt=\"Nommer et cr\u00e9er le nouveau menu\" width=\"888\" height=\"683\"><figcaption class=\"wp-caption-text\">Nommer et cr\u00e9er le nouveau menu<\/figcaption><\/figure>\n<p>Vous \u00eates maintenant pr\u00eat \u00e0 ajouter des \u00e9l\u00e9ments dans votre menu WordPress. Dans la plupart des cas, il est pr\u00e9f\u00e9rable de garder votre menu aussi simple que possible, tout en donnant aux utilisateurs suffisamment d&rsquo;informations pour se rendre l\u00e0 o\u00f9 ils veulent aller.<\/p>\n<p>L&rsquo;int\u00e9gration d&rsquo;un trop grand nombre de pages peut submerger les visiteurs et rendre la navigation plus difficile au lieu de la faciliter.<\/p>\n<p>Il existe plusieurs fa\u00e7ons d&rsquo;ajouter des \u00e9l\u00e9ments \u00e0 votre menu. Les deux premiers sont les <strong>Pages<\/strong> et les <strong>Articles<\/strong>, et ils fonctionnent de mani\u00e8re tr\u00e8s similaire.<\/p>\n<figure style=\"width: 884px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajouter-pages-wordpress-1.png\" alt=\"Ajouter des pages au menu\" width=\"884\" height=\"696\"><figcaption class=\"wp-caption-text\">Ajouter des pages au menu<\/figcaption><\/figure>\n<p>Dans la barre lat\u00e9rale de l&rsquo;\u00e9diteur de menu, il suffit de cocher les cases de chaque page ou article que vous souhaitez inclure, et de cliquer sur le bouton<strong> Ajouter au menu :<\/strong><\/p>\n<p>Votre prochaine option est d&rsquo;int\u00e9grer des <strong>liens personnalis\u00e9s<\/strong>. Cela implique de fournir l&rsquo;URL de la page vers laquelle vous souhaitez diriger les utilisateurs, puis de cr\u00e9er un libell\u00e9 court mais descriptif pour cette page. Apr\u00e8s cela, vous pouvez cliquer \u00e0 nouveau sur <strong>Ajouter au menu :<\/strong><\/p>\n<figure style=\"width: 889px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajouter-personnalise-lien-wordpress-menu-1.png\" alt=\"Ajouter un lien personnalis\u00e9 au menu\" width=\"889\" height=\"551\"><figcaption class=\"wp-caption-text\">Ajouter un lien personnalis\u00e9 au menu<\/figcaption><\/figure>\n<p>Enfin, vous pouvez \u00e9galement ajouter des <strong>pages de cat\u00e9gories et d\u2019articles<\/strong> \u00e0 votre menu de navigation. Les utilisateurs acc\u00e8dent ainsi \u00e0 une page d&rsquo;archives o\u00f9 ils peuvent consulter tout le contenu sur un sujet particulier.<\/p>\n<p>Les blogs et autres sites \u00e0 fort contenu peuvent trouver cette fonctionnalit\u00e9 particuli\u00e8rement utile :<\/p>\n<figure style=\"width: 886px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ajouter-categories-wordpress-menu.png\" alt=\"Ajouter des cat\u00e9gories au menu\" width=\"886\" height=\"662\"><figcaption class=\"wp-caption-text\">Ajouter des cat\u00e9gories au menu<\/figcaption><\/figure>\n<p>Comme pour les options Pages et Articles, il suffit de <strong>cocher les cases des cat\u00e9gories<\/strong> que vous souhaitez inclure et de choisir <strong>Ajouter au menu<\/strong><em>.<\/em><\/p>\n<h3>\u00c9tape 2 : Organisez votre menu WordPress<\/h3>\n<p>Une fois que vous avez ajout\u00e9 tous les \u00e9l\u00e9ments de votre menu, vous devriez les voir list\u00e9s dans les diff\u00e9rentes cases de la rubrique <strong>Structure du menu<\/strong> dans l&rsquo;\u00e9diteur :<\/p>\n<figure style=\"width: 882px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-structure.png\" alt=\"La section \u00ab Structure du menu \u00bb de l'\u00e9diteur de menu\" width=\"882\" height=\"742\"><figcaption class=\"wp-caption-text\">La section \u00ab Structure du menu \u00bb de l&rsquo;\u00e9diteur de menu<\/figcaption><\/figure>\n<p>Dans un premier temps, les \u00e9l\u00e9ments du menu appara\u00eetront dans l&rsquo;ordre dans lequel vous les avez ajout\u00e9s. Cependant, vous pouvez facilement modifier leur organisation en les faisant glisser et en les d\u00e9posant l\u00e0 o\u00f9 vous le voulez. Cela vous permettra de cr\u00e9er un menu simple sans fonction de liste d\u00e9roulante.<\/p>\n<p>Il existe plusieurs fa\u00e7ons d&rsquo;ajouter des menus d\u00e9roulants dans votre menu WordPress.<\/p>\n<p>Le plus simple est de continuer \u00e0 faire des glisser-d\u00e9poser, mais de commencer \u00e0 imbriquer certains \u00e9l\u00e9ments du menu sous d&rsquo;autres :<\/p>\n<figure style=\"width: 894px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/imbrication-menu-wordpress.png\" alt=\"Imbrication de cat\u00e9gories sous la page du blog\" width=\"894\" height=\"742\"><figcaption class=\"wp-caption-text\">Imbrication de cat\u00e9gories sous la page du blog<\/figcaption><\/figure>\n<p>Par exemple, dans l&rsquo;image ci-dessus, nous avons d\u00e9plac\u00e9 les trois cat\u00e9gories d&rsquo;articles qui sont ajout\u00e9es au menu sous <strong>Blog, <\/strong>pour en faire des \u00ab\u00a0sous-\u00e9l\u00e9ments\u00a0\u00bb. Sur l\u2019interface publique, cela cr\u00e9era un menu d\u00e9roulant qui ressemblera \u00e0 ceci :<\/p>\n<figure style=\"width: 470px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-exemple-menu-deroulant.png\" alt=\"Exemple de menu d\u00e9roulant dans WordPress\" width=\"470\" height=\"263\"><figcaption class=\"wp-caption-text\">Exemple de menu d\u00e9roulant dans WordPress<\/figcaption><\/figure>\n<p>Si vous souhaitez ajouter un menu d\u00e9roulant qui inclut toutes les cat\u00e9gories de votre site, vous pouvez le faire en ajoutant un <strong>lien personnalis\u00e9 <\/strong>dans votre menu. Utilisez \u00ab\u00a0#\u00a0\u00bb comme URL et \u00ab\u00a0Cat\u00e9gories\u00a0\u00bb ou quelque chose de similaire pour le libell\u00e9 :<\/p>\n<figure style=\"width: 883px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/libelle-link-categories.png\" alt=\"Cr\u00e9er un libell\u00e9 \u00ab Cat\u00e9gories \u00bb pour le menu\" width=\"883\" height=\"744\"><figcaption class=\"wp-caption-text\">Cr\u00e9er un libell\u00e9 \u00ab Cat\u00e9gories \u00bb pour le menu<\/figcaption><\/figure>\n<p>Vous pouvez alors ajouter toutes vos cat\u00e9gories au menu et les imbriquer sous ce libell\u00e9. Chaque cat\u00e9gorie sera cliquable, mais le libell\u00e9 ne le sera pas :<\/p>\n<figure style=\"width: 508px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/categories-deroulant-menu-wordpress.png\" alt=\"Le menu d\u00e9roulant des Cat\u00e9gories\" width=\"508\" height=\"229\"><figcaption class=\"wp-caption-text\">Le menu d\u00e9roulant des Cat\u00e9gories<\/figcaption><\/figure>\n<p>En utilisant une technique similaire, vous pouvez \u00e9galement masquer tous les \u00e9l\u00e9ments de votre menu dans un seul menu d\u00e9roulant.<\/p>\n<p>Ajoutez un autre lien personnalis\u00e9, en utilisant \u00ab\u00a0#\u00a0\u00bb comme URL et \u00ab\u00a0Menu\u00a0\u00bb comme libell\u00e9. Ensuite, imbriquez tous les autres \u00e9l\u00e9ments de votre menu sous celui-ci :<\/p>\n<figure style=\"width: 909px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/big-dropdown-menu-wordpress.png\" alt=\"Imbriquer de tous les liens de navigation sous un seule libell\u00e9 de menu\" width=\"909\" height=\"816\"><figcaption class=\"wp-caption-text\">Imbriquer de tous les liens de navigation sous un seule libell\u00e9 de menu<\/figcaption><\/figure>\n<p>Le r\u00e9sultat sur l\u2019interface publique sera un menu d\u00e9roulant qui comprendra les pages cl\u00e9s de votre site.<\/p>\n<p>Comme vous pouvez le voir dans l&rsquo;\u00e9l\u00e9ment<strong> Cat\u00e9gories<\/strong> ci-dessous, tout contenu imbriqu\u00e9 sous un sous-\u00e9l\u00e9ment appara\u00eetra dans un sous-menu :<\/p>\n<figure style=\"width: 468px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-deroulant-menu-veritable-1.png\" alt=\"Un v\u00e9ritable menu d\u00e9roulant de navigation WordPress\" width=\"468\" height=\"314\"><figcaption class=\"wp-caption-text\">Un v\u00e9ritable menu d\u00e9roulant de navigation WordPress<\/figcaption><\/figure>\n<p>En utilisant ainsi l&rsquo;\u00e9diteur de menu en glisser-d\u00e9poser, vous pouvez cr\u00e9er n&rsquo;importe quel style et combinaison de menus d\u00e9roulants WordPress. N&rsquo;oubliez pas, cependant, qu&rsquo;un trop grand nombre d&rsquo;\u00e9l\u00e9ments de menu peut \u00eatre d\u00e9routant pour les utilisateurs.<\/p>\n<p>Il est \u00e9galement pr\u00e9f\u00e9rable de limiter le nombre de sous-menus que vous int\u00e9grez, pour \u00e9viter de trop encombrer votre navigation.<\/p>\n<h3>\u00c9tape 3 : Int\u00e9grez des images dans votre menu WordPress<\/h3>\n<p>Si \u00e0 la fin de l&rsquo;\u00e9tape 2, votre menu d\u00e9roulant ressemble exactement \u00e0 ce que vous aviez imagin\u00e9, vous pouvez passer \u00e0 l&rsquo;\u00e9tape 5 pour le publier. Toutefois, vous pouvez prendre d&rsquo;autres mesures si vous souhaitez am\u00e9liorer votre menu en le personnalisant.<\/p>\n<p>Une tactique \u00e0 envisager consiste \u00e0 int\u00e9grer des \u00e9l\u00e9ments visuels dans vos menus pour mieux guider les visiteurs. Si les libell\u00e9s descriptifs sont essentiels, une image ou une ic\u00f4ne peut parfois aider les utilisateurs \u00e0 d\u00e9terminer plus rapidement o\u00f9 m\u00e8ne un lien de navigation particulier.<\/p>\n<p>Il est possible d&rsquo;ajouter des images en utilisant des CSS personnalis\u00e9s, dont nous parlerons bient\u00f4t. Toutefois, nous recommandons de prendre une extension telle que <a href=\"https:\/\/wordpress.org\/plugins\/menu-image\/\">Menu Image, Icons Made Easy<\/a> :<\/p>\n<figure style=\"width: 279px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-dropdown-menu-images.png\" alt=\"Menu d\u00e9roulant WordPress avec images\" width=\"279\" height=\"340\"><figcaption class=\"wp-caption-text\">Menu d\u00e9roulant WordPress avec images<\/figcaption><\/figure>\n<p>De cette fa\u00e7on, vous n&rsquo;avez pas \u00e0 vous soucier de vous encombrer d&rsquo;un code pour ajouter un int\u00e9r\u00eat visuel \u00e0 votre menu d\u00e9roulant.<\/p>\n<p>Il suffit d&rsquo;installer l\u2019extension, puis de retourner sur <strong>Apparence &gt; Menus :<\/strong><\/p>\n<figure style=\"width: 714px\" class=\"wp-caption alignleft\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/section-image-dans-menu.png\" alt=\"La section Menu Image dans l'\u00e9diteur de menu\" width=\"714\" height=\"523\"><figcaption class=\"wp-caption-text\">La section Menu Image dans l&rsquo;\u00e9diteur de menu<\/figcaption><\/figure>\n<p>Vous verrez qu&rsquo;il y a maintenant des options d&rsquo;image pour chaque page que vous avez incluse dans votre menu. Vous pouvez s\u00e9lectionner la photo, la taille et la position de chaque page. N&rsquo;oubliez pas d\u2019enregistrer les changements lorsque vous avez termin\u00e9.<\/p>\n<h3>\u00c9tape 4 : Ajouter du CSS personnalis\u00e9 \u00e0 votre menu d\u00e9roulant<\/h3>\n<p>Bien que cela ne soit pas recommand\u00e9 pour les d\u00e9butants, les utilisateurs interm\u00e9diaires et avanc\u00e9s peuvent vouloir incorporer leur propre style dans leurs menus d\u00e9roulants WordPress. Mais avant de vous <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">lancer dans votre CSS<\/a>, vous devez ajouter une classe \u00e0 votre menu.<\/p>\n<p>Si vous sautez cette \u00e9tape, <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/#css\">votre CSS personnalis\u00e9<\/a> peut poser des probl\u00e8mes pour tout autre menu de votre site. Par exemple, vous pouvez par inadvertance appliquer \u00e0 votre menu de bas de page un style que vous ne vouliez que pour votre menu d\u00e9roulant principal.<\/p>\n<p>Dans l&rsquo;\u00e9diteur de menu, cliquez sur <strong>Options d&rsquo;\u00e9cran <\/strong>dans le coin sup\u00e9rieur droit :<\/p>\n<figure style=\"width: 263px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/screen-options-wordpress.png\" alt=\"L'onglet \u00ab Options d'\u00e9cran \u00bb dans l'\u00e9diteur de menu\" width=\"263\" height=\"98\"><figcaption class=\"wp-caption-text\">L&rsquo;onglet \u00ab Options d&rsquo;\u00e9cran \u00bb dans l&rsquo;\u00e9diteur de menu<\/figcaption><\/figure>\n<p>Ensuite, cochez la case pour les <strong>classes CSS<\/strong> :<\/p>\n<figure style=\"width: 727px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/cocher-css-classes-wordpress.png\" alt=\"La case \u00e0 cocher Classes CSS dans l'onglet Options d'\u00e9cran\" width=\"727\" height=\"166\"><figcaption class=\"wp-caption-text\">La case \u00e0 cocher Classes CSS dans l&rsquo;onglet Options d&rsquo;\u00e9cran<\/figcaption><\/figure>\n<p>Cela ajoutera un champ <strong>\u00ab<\/strong>\u00a0<strong>Classes CSS\u00a0\u00bb<\/strong> \u00e0 chaque page de votre menu :<\/p>\n<figure style=\"width: 431px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/css-champ-classes-wordpress.png\" alt=\"Le champ Classes CSS dans l'\u00e9diteur de menu\" width=\"431\" height=\"508\"><figcaption class=\"wp-caption-text\">Le champ Classes CSS dans l&rsquo;\u00e9diteur de menu<\/figcaption><\/figure>\n<p>Une fois que vous avez ajout\u00e9 une ou plusieurs classes CSS aux \u00e9l\u00e9ments de votre menu, tout code personnalis\u00e9 que vous incluez dans votre feuille de style ne s&rsquo;appliquera qu&rsquo;aux \u00e9l\u00e9ments de votre menu avec la classe que vous aurez sp\u00e9cifi\u00e9e.<\/p>\n<p>Vous pouvez maintenant vous rendre sur votre feuille de style ou dans l\u2019outil de personnalisation, et vous mettre au travail sur <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-code-wordpress\/#css\">votre style personnalis\u00e9<\/a>.<\/p>\n<h3>\u00c9tape 5 : Publiez votre menu dans des lieux de premier choix<\/h3>\n<p>Une fois que votre menu d\u00e9roulant WordPress est structur\u00e9 pour r\u00e9pondre \u00e0 vos besoins et que vous avez int\u00e9gr\u00e9 les personnalisations que vous souhaitez, vous serez pr\u00eat \u00e0 le publier sur votre site.<\/p>\n<p>Ce processus varie l\u00e9g\u00e8rement en fonction de <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-theme-wordpress\/\">votre th\u00e8me<\/a> et les emplacements de menu qu&rsquo;il prend en charge. Pour cet exemple, nous allons utiliser le <a href=\"https:\/\/kinsta.com\/fr\/blog\/theme-twenty-twenty\/\">th\u00e8me Twenty Twenty<\/a>.<\/p>\n<p>Dans l&rsquo;\u00e9diteur de menu, faites d\u00e9filer le menu jusqu&rsquo;\u00e0 la section<strong> R\u00e9glages du menu :<\/strong><\/p>\n<figure style=\"width: 636px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-menu-display-reglages.png\" alt=\"La section \u00ab R\u00e9glages du menu \u00bb dans l'\u00e9diteur\" width=\"636\" height=\"210\"><figcaption class=\"wp-caption-text\">La section \u00ab R\u00e9glages du menu \u00bb dans l&rsquo;\u00e9diteur<\/figcaption><\/figure>\n<p>Vous pouvez cocher la premi\u00e8re case si vous souhaitez que de nouvelles pages soient automatiquement ajout\u00e9es \u00e0 votre menu. Si vous commencez tout juste \u00e0 travailler sur votre site et que vous n&rsquo;avez pas encore ajout\u00e9 toutes vos pages cl\u00e9s, ce guide peut vous \u00eatre utile. Veillez toutefois \u00e0 ne pas ajouter accidentellement trop d&rsquo;\u00e9l\u00e9ments dans votre menu.<\/p>\n<p>Sous cette option, vous verrez une liste de cases \u00e0 cocher indiquant les diff\u00e9rentes zones de votre site o\u00f9 vous pouvez afficher votre menu.<\/p>\n<p>Le th\u00e8me Twenty Twenty comprend diff\u00e9rentes zones de menu : <strong>Menu horizontal grands \u00e9crans<\/strong>, <strong>Menu \u00e9tendu grands \u00e9crans<\/strong>, <strong>Menu sur mobile<\/strong>, <strong>Menu du pied de page<\/strong>, <strong>Menu r\u00e9seaux sociaux<\/strong><em>.<\/em><\/p>\n<p>Dans ce cas, le menu que nous avons cr\u00e9\u00e9 est le mieux adapt\u00e9 \u00e0 l&#8217;emplacement du<strong> menu horizontal grands \u00e9crans,<\/strong> qui se trouve dans l&rsquo;en-t\u00eate du site :<\/p>\n<figure style=\"width: 1627px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ecrans-horizontal-menu.png\" alt=\"Menu horizontal grands \u00e9crans le th\u00e8me des Twenty Twenty\" width=\"1627\" height=\"112\"><figcaption class=\"wp-caption-text\">Menu horizontal grands \u00e9crans le th\u00e8me des Twenty Twenty<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement envisager de naviguer dans l&rsquo;onglet \u00ab\u00a0<strong>G\u00e9rer les emplacements\u00a0<\/strong>\u00bb dans la zone \u00ab\u00a0<strong>Menus\u00a0<\/strong>\u00bb de votre tableau de bord. Ici, vous pouvez voir tous les emplacements de menu qui sont pris en charge par votre th\u00e8me, ainsi que le menu que vous avez assign\u00e9 \u00e0 chacun d&rsquo;eux :<\/p>\n<figure style=\"width: 1067px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-menu-emplacements.png\" alt=\"L'onglet G\u00e9rer les emplacements\" width=\"1067\" height=\"479\"><figcaption class=\"wp-caption-text\">L&rsquo;onglet G\u00e9rer les emplacements<\/figcaption><\/figure>\n<p>Lorsque vous placez vos menus, il peut \u00eatre utile de voir \u00e0 quoi ils ressembleront sur l\u2019interface publique.<\/p>\n<figure style=\"width: 288px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/gerer-direct.png\" alt=\"L'option G\u00e9rer avec l\u2019aper\u00e7u en direct\" width=\"288\" height=\"99\"><figcaption class=\"wp-caption-text\">L&rsquo;option G\u00e9rer avec l\u2019aper\u00e7u en direct<\/figcaption><\/figure>\n<p>Cliquez sur le bouton<strong> G\u00e9rer avec l\u2019aper\u00e7u en direct<\/strong> pour voir comment votre menu appara\u00eetra \u00e0 l&rsquo;endroit que vous lui avez choisi, en utilisant la personnalisation de WordPress :<\/p>\n<figure style=\"width: 1378px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wordpress-menu-personnalisation.png\" alt=\"Un aper\u00e7u en direct du menu WordPress dans l\u2019outil de personnalisation\" width=\"1378\" height=\"1049\"><figcaption class=\"wp-caption-text\">Un aper\u00e7u en direct du menu WordPress dans l\u2019outil de personnalisation<\/figcaption><\/figure>\n<p>Vous pouvez ensuite publier votre ou vos menus directement \u00e0 partir de la personnalisation. Si jamais vous devez ajouter ou supprimer des \u00e9l\u00e9ments de votre menu d\u00e9roulant, vous pouvez simplement retourner \u00e0 l&rsquo;\u00e9diteur de menu et faire les ajustements n\u00e9cessaires.<\/p>\n<h2>Extensions WordPress pour am\u00e9liorer vos menus d\u00e9roulants<\/h2>\n<p>Bien que vous puissiez cr\u00e9er des menus de navigation WordPress enti\u00e8rement fonctionnels sans aucun outil suppl\u00e9mentaire, il peut parfois \u00eatre utile d&rsquo;\u00e9tendre les fonctionnalit\u00e9s de votre menu. Si c&rsquo;est le cas de votre site, vous pourriez vouloir examiner certains <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/\">des extensions de menu WordPress populaires<\/a>.<\/p>\n<p><a href=\"https:\/\/wordpress.org\/plugins\/wp-nested-pages\/\">Nested Pages<\/a> est un moyen efficace pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/articles-forme-longue\/\">des blogs \u00e0 fort contenu<\/a> pour cr\u00e9er des menus d\u00e9roulants. Bien qu&rsquo;elle soit principalement utilis\u00e9e pour organiser les articles et les pages, cette extension g\u00e9n\u00e8re \u00e9galement automatiquement un menu qui refl\u00e8te la structure de votre contenu :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/nested-pages-1.png\" alt=\"nested pages\" width=\"1500\" height=\"488\"><figcaption class=\"wp-caption-text\">Extension WordPress Nested Pages<\/figcaption><\/figure>\n<p>S&rsquo;il n&rsquo;est pas forc\u00e9ment conseill\u00e9 d&rsquo;int\u00e9grer un grand nombre d&rsquo;\u00e9l\u00e9ments dans vos menus, c&rsquo;est parfois in\u00e9vitable.<\/p>\n<p>Si c&rsquo;est le cas de votre site, <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/#max-mega-menu\">Max Mega Menu<\/a> peut vous aider \u00e0 combiner vos menus WordPress existants pour former un \u00ab\u00a0m\u00e9ga menu\u00a0\u00bb :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/max-mega-menu-1.png\" alt=\"Extension WordPress Max Mega Menu\" width=\"1500\" height=\"489\"><figcaption class=\"wp-caption-text\">Extension WordPress Max Mega Menu<\/figcaption><\/figure>\n<p>Avec l&rsquo;essor de la navigation mobile, il est essentiel de s&rsquo;assurer que vos menus sont toujours lisibles sur les appareils mobiles.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-menu-wordpress\/#wp-mobile-menu\">WP Mobile Menu<\/a> s\u2019associe \u00e0 n&rsquo;importe quel th\u00e8me responsive pour vous aider \u00e0 cr\u00e9er un syst\u00e8me de navigation pour les utilisateurs de votre site qui sont en d\u00e9placement :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/wp-mobile-menu-1.png\" alt=\"wp mobile menu\" width=\"1500\" height=\"488\"><figcaption class=\"wp-caption-text\">Extension WordPress WP Mobile Menu<\/figcaption><\/figure>\n<p>Enfin, comme nous l&rsquo;avons d\u00e9j\u00e0 dit, il peut y avoir des situations dans lesquelles les \u00e9l\u00e9ments descriptifs du menu ne suffisent pas. Dans ces situations, vous pouvez envisager d&rsquo;utiliser Menu Image, Icons Made Easy comme nous l&rsquo;avons d\u00e9crit \u00e0 l&rsquo;\u00e9tape 3 ci-dessus.<\/p>\n<p>Vous pouvez utiliser n&rsquo;importe laquelle de ces extensions pour am\u00e9liorer votre syst\u00e8me de navigation actuel et rendre votre menu d\u00e9roulant WordPress plus efficace. N&rsquo;oubliez pas que parfois, en mati\u00e8re de navigation, <strong>plus c&rsquo;est simple, mieux c&rsquo;est<\/strong>. N&rsquo;ajoutez des fonctionnalit\u00e9s suppl\u00e9mentaires que si cela peut am\u00e9liorer votre UX et \u00e9viter d&rsquo;encombrer votre site.<\/p>\n<h2>D\u00e9pannage de votre menu d\u00e9roulant WordPress<\/h2>\n<p>Si vous avez configur\u00e9 votre menu comme d\u00e9crit ci-dessus, mais que la fonctionnalit\u00e9 de menu d\u00e9roulant ne fonctionne pas, il y a plusieurs causes possibles.<\/p>\n<p>Bien que nous ne puissions pas les couvrir toutes ici, nous pouvons vous aider \u00e0 cerner la cause de votre probl\u00e8me afin que vous puissiez trouver la bonne solution.<\/p>\n<p>Souvent, un menu qui ne fonctionne pas est le r\u00e9sultat d&rsquo;un conflit de code entre votre menu personnalis\u00e9 et votre th\u00e8me. La premi\u00e8re chose \u00e0 faire si votre menu ne fonctionne pas est de passer \u00e0 un th\u00e8me par d\u00e9faut tel que Twenty Twenty. Si votre menu recommence \u00e0 fonctionner, vous saurez que le probl\u00e8me est li\u00e9 \u00e0 votre th\u00e8me. Vous pouvez alors contacter le d\u00e9veloppeur de votre th\u00e8me pour chercher une solution.<\/p>\n<p>Parmi les autres causes possibles, on peut citer<\/p>\n<ul>\n<li><strong>Code mal saisi : <\/strong>V\u00e9rifiez que les CSS personnalis\u00e9s que vous avez ajout\u00e9s sont corrects et que vous utilisez les classes CSS comme d\u00e9crit \u00e0 l&rsquo;\u00e9tape 4.<\/li>\n<li><strong>Incompatibilit\u00e9 des extensions : <\/strong>Essayez de d\u00e9sactiver toutes les extensions li\u00e9es aux menus que vous avez install\u00e9s, pour voir si cela r\u00e9sout le probl\u00e8me.<\/li>\n<li><strong>JQuery obsol\u00e8te : <\/strong>Passez \u00e0 la derni\u00e8re version de jQuery et essayez d&rsquo;ouvrir \u00e0 nouveau le menu d\u00e9roulant.<\/li>\n<\/ul>\n<p>Cependant, comme nous l&rsquo;avons d\u00e9j\u00e0 mentionn\u00e9, les causes potentielles d\u2019un menu d\u00e9fectueux sont nombreuses. Si aucune des solutions ci-dessus ne semble fonctionner, nous vous recommandons de vous rendre sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/support-wordpress\/\">f<\/a>orums de support de WordPress, de contacter notre <a href=\"https:\/\/kinsta.com\/fr\/nous-contacter\/\">\u00e9quipe de support Kinsta experte sur WordPress<\/a>, ou d\u2019<a href=\"https:\/\/kinsta.com\/fr\/blog\/engager-developpeur-wordpress\/\">engager un d\u00e9veloppeur WordPress<\/a> pour le r\u00e9parer pour vous.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Bien que cela puisse sembler \u00eatre une petite chose, la navigation de votre site WordPress peut faire ou d\u00e9faire son succ\u00e8s. L&rsquo;utilisation de menus d\u00e9roulants permet de gagner de la place sur les \u00e9crans des utilisateurs, tout en leur permettant de se d\u00e9placer facilement sur votre site et d&rsquo;am\u00e9liorer vos conversions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>La navigation sur le site est essentielle pour aider vos utilisateurs \u00e0 se rendre l\u00e0 o\u00f9 ils veulent aller. Un menu bien con\u00e7u peut grandement contribuer &#8230;<\/p>\n","protected":false},"author":103,"featured_media":36571,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[351,33],"topic":[1039,1028],"class_list":["post-36537","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-ux","tag-wordpress","topic-conseils-wordpress","topic-developpement-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)<\/title>\n<meta name=\"description\" content=\"Avez-vous beaucoup d&#039;\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)\" \/>\n<meta property=\"og:description\" content=\"Avez-vous beaucoup d&#039;\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-31T10:36:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T19:50:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Matteo Du\u00f2\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Avez-vous beaucoup d&#039;\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@matteoduo\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Matteo Du\u00f2\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"20 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\"},\"author\":{\"name\":\"Matteo Du\u00f2\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9d811e805493f00205e6409451055174\"},\"headline\":\"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)\",\"datePublished\":\"2020-01-31T10:36:51+00:00\",\"dateModified\":\"2025-10-01T19:50:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\"},\"wordCount\":3443,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\",\"keywords\":[\"ux\",\"WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\",\"name\":\"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\",\"datePublished\":\"2020-01-31T10:36:51+00:00\",\"dateModified\":\"2025-10-01T19:50:22+00:00\",\"description\":\"Avez-vous beaucoup d'\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conseils WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9d811e805493f00205e6409451055174\",\"name\":\"Matteo Du\u00f2\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g\",\"caption\":\"Matteo Du\u00f2\"},\"description\":\"Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.\",\"sameAs\":[\"https:\/\/www.matteoduo.com\",\"https:\/\/www.linkedin.com\/in\/matteoduo\/\",\"https:\/\/x.com\/matteoduo\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/matteoduo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)","description":"Avez-vous beaucoup d'\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)","og_description":"Avez-vous beaucoup d'\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !","og_url":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2020-01-31T10:36:51+00:00","article_modified_time":"2025-10-01T19:50:22+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","type":"image\/jpeg"}],"author":"Matteo Du\u00f2","twitter_card":"summary_large_image","twitter_description":"Avez-vous beaucoup d'\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","twitter_creator":"@matteoduo","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Matteo Du\u00f2","Dur\u00e9e de lecture estim\u00e9e":"20 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/"},"author":{"name":"Matteo Du\u00f2","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9d811e805493f00205e6409451055174"},"headline":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)","datePublished":"2020-01-31T10:36:51+00:00","dateModified":"2025-10-01T19:50:22+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/"},"wordCount":3443,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","keywords":["ux","WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/","url":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/","name":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","datePublished":"2020-01-31T10:36:51+00:00","dateModified":"2025-10-01T19:50:22+00:00","description":"Avez-vous beaucoup d'\u00e9l\u00e9ments \u00e0 lister dans votre menu WordPress ? Solution rapide : cr\u00e9ez un menu d\u00e9roulant WordPress en quelques \u00e9tapes en suivant ce guide !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/menu-deroulant-wordpress.jpg","width":1460,"height":730,"caption":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/menu-deroulant-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conseils WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/conseils-wordpress\/"},{"@type":"ListItem","position":3,"name":"Comment cr\u00e9er un menu d\u00e9roulant dans WordPress (en 5 \u00e9tapes)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/9d811e805493f00205e6409451055174","name":"Matteo Du\u00f2","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/78636e34d9c125b93efb7e0893a776f8?s=96&d=mm&r=g","caption":"Matteo Du\u00f2"},"description":"Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.","sameAs":["https:\/\/www.matteoduo.com","https:\/\/www.linkedin.com\/in\/matteoduo\/","https:\/\/x.com\/matteoduo"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/matteoduo\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/103"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=36537"}],"version-history":[{"count":8,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36537\/revisions"}],"predecessor-version":[{"id":44313,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36537\/revisions\/44313"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/de"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/se"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/it"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/dk"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/translations\/nl"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36537\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/36571"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=36537"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=36537"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=36537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}