Un menu déroulant est un élément d’interface qui affiche une liste d’options ou de liens, masquée par défaut, lorsque l’utilisateur active un intitulé, un bouton ou une icône par un clic, un toucher, le clavier ou le survol.
Il sert à présenter beaucoup de choix dans peu d’espace. Sur un site, il apparaît surtout dans la navigation : le survol ou l’activation d’une rubrique ouvre la liste de ses sous-rubriques, aussi appelée sous-menu. Dans une application, il regroupe des commandes, comme les menus « Fichier » ou « Édition » d’un logiciel. Le panneau se referme lorsque l’utilisateur choisit une option, clique ailleurs, quitte la zone avec le pointeur ou appuie sur la touche Échap.
Un menu déroulant comprend un déclencheur, souvent accompagné d’un indicateur visuel comme une flèche, un panneau qui contient les options, et un état ouvert ou fermé que le code doit exposer aux technologies d’assistance. Sa pertinence tient à deux choix faits en amont : l’arborescence du site web, qui fixe le regroupement des options, et le wording menu, c’est-à-dire l’intitulé de chaque entrée.
Le menu déroulant se distingue du méga menu, qui affiche les options en colonnes et en groupes titrés dans un large panneau. Il se distingue aussi du menu hamburger, qui masque toute la navigation derrière une icône. Dans un formulaire, la liste déroulante est un champ de formulaire qui sert à choisir une valeur, et non à naviguer. Le terme relève de l’ergonomie web et de la conception d’interfaces.
Le menu déroulant économise l’espace, mais il cache l’information. Le visiteur ne voit les sous-rubriques qu’après une action, et il doit deviner qu’elles existent. Nous le jugeons pertinent quand une rubrique regroupe plusieurs sous-rubriques que le visiteur cherche activement. Il l’est beaucoup moins pour deux ou trois liens, qui gagnent à rester visibles, ou pour des dizaines d’options, mieux servies par un méga menu ou par une page de rubrique.
Le critère de succès 1.4.13 des WCAG 2.2 (W3C, niveau AA) vise les contenus qui apparaissent au survol ou à la prise de focus, et cite explicitement les sous-menus. Trois conditions s’appliquent : l’utilisateur peut faire disparaître le contenu sans déplacer le pointeur ou le focus, sauf si ce contenu ne masque rien, il peut déplacer le pointeur sur le contenu sans le faire disparaître, et le contenu reste affiché tant que le déclencheur est actif.
Le tutoriel « Menus » de la WAI (W3C, publié en 2015, mis à jour en 2026) ajoute des principes de mise en œuvre. Les sous-menus ne doivent pas s’ouvrir au simple passage de la touche Tabulation. Si la rubrique parente mène aussi à une page, un bouton distinct ouvre le sous-menu. L’état ouvert ou fermé est indiqué par l’attribut aria-expanded. L’exemple du tutoriel retarde d’une seconde la fermeture au survol, pour tolérer un pointage imprécis.
Suivez les clics sur chaque option, rapportés au nombre d’ouvertures du menu. Une option jamais choisie est mal nommée, mal placée ou inutile. Un test utilisateur complète la mesure : il montre si le visiteur devine l’existence du sous-menu.
Le modèle Word gratuit de cahier des charges site internet d’Advalians aide à formaliser vos besoins de création ou de refonte et à comparer les agences à armes égales.
Advalians, cabinet de conseil indépendant en marketing et communication, vous aide à clarifier vos choix et à décider.
Le menu déroulant affiche une simple liste d’options, en général verticale. Le méga menu ouvre un large panneau qui organise de nombreuses options en colonnes et en groupes titrés, parfois avec un visuel.
Le critère de choix est le volume et la structure de l’offre. Pour une rubrique qui compte quelques sous-rubriques de même niveau, le menu déroulant suffit. Quand une rubrique contient des catégories et des sous-catégories que le visiteur doit comparer d’un coup d’œil, le méga menu devient plus lisible. Dans les deux cas, l’arborescence se valide avant le composant.
Au clic ou au toucher, et éventuellement aussi au survol sur ordinateur. Le survol seul exclut les écrans tactiles, qui n’en disposent pas, et pose des difficultés aux utilisateurs du clavier.
Si vous gardez le survol, respectez trois règles. Retardez la fermeture quand le pointeur quitte le panneau : l’exemple du tutoriel « Menus » du W3C utilise une seconde. Permettez de déplacer le pointeur sur le sous-menu sans qu’il disparaisse. Prévoyez la fermeture par la touche Échap. Vérifiez enfin le comportement au clavier, sans souris.
Mesurez les ouvertures du menu et les clics sur chaque option, avec un marquage d’événements dans l’outil d’analyse d’audience. Rapportez ensuite les clics de chaque option au nombre d’ouvertures.
Une option rarement choisie appelle trois hypothèses : libellé obscur, mauvais classement ou contenu peu demandé. Un test utilisateur permet de trancher. Observez aussi les visiteurs qui ouvrent le menu puis le referment sans choisir : ils signalent que l’option attendue n’y figure pas, ou pas sous ce nom.
Les plus courantes sont l’ouverture au seul survol, l’absence d’état exposé aux technologies d’assistance et la fermeture trop rapide. Le critère 1.4.13 des WCAG 2.2 exige qu’un sous-menu affiché au survol ou au focus et qui masque d’autres contenus puisse être fermé sans déplacer le pointeur, survolé sans disparaître et maintenu tant que le déclencheur est actif.
Contrôlez trois points : le menu s’ouvre et se ferme au clavier, l’attribut aria-expanded reflète son état, et chaque sous-rubrique reste accessible depuis la page de la rubrique parente. Faites tester par un utilisateur de lecteur d’écran.
Renoncez-y quand les options sont peu nombreuses ou essentielles. Deux ou trois liens gagnent à rester visibles : les masquer ajoute un clic sans rien économiser. Renoncez-y aussi quand la navigation devient profonde, avec des sous-menus en cascade sur plusieurs niveaux.
Les solutions de remplacement sont connues : liens visibles dans la barre de navigation, menu par onglets, méga menu pour une offre très étendue, ou page de rubrique qui présente ses sous-rubriques. Testez la solution retenue sur ordinateur et sur mobile, où les contraintes diffèrent.
Modèles, grilles et guides prêts à l’emploi pour vos projets marketing et communication.
