Trois barres horizontales empilées dans un coin de l’écran : tout le monde a déjà touché cette icône, que l’on appelle le menu burger. Selon que l’on pense à sa forme ou à la manière dont le panneau se déploie, on parle aussi de menu hamburger, de menu latéral ou de menu à tiroir. Un tapotement suffit pour afficher les rubriques du site, jusque-là cachées. Les études d’usabilité fournissent désormais des chiffres qui permettent de trancher autrement qu’à coups de préférences personnelles, et c’est le fil de ce guide : l’histoire de l’icône, ses avantages, ce que coûte réellement un menu masqué, les cas où il se justifie, les règles de conception, le code et les alternatives.
Ce que désigne exactement un menu burger
Le menu burger est un bouton de navigation qui regroupe, en un seul point d’entrée, les options principales d’un site, d’une application ou d’un logiciel en ligne. On le place le plus souvent dans l’angle supérieur de l’écran, à gauche ou à droite. Tant que l’utilisateur ne le touche pas, la liste des pages reste invisible. Une fois activé, elle apparaît sous deux formes courantes : un panneau qui glisse depuis le bord de l’écran, appelé menu hors canevas, ou une liste déroulante qui s’étend sous l’en-tête. Le premier est plus immersif, le second plus rapide, et seul un test auprès du public visé permet de départager.
Son nom vient de son dessin, trois couches superposées qui évoquent un sandwich stylisé.
D’où vient cette icône ?
Norm Cox, designer d’interaction chez Xerox, dessine le pictogramme en 1981 pour l’interface graphique du Xerox Star, l’un des premiers ordinateurs commerciaux dotés d’un affichage visuel. Il retient trois traits de même longueur pour suggérer une liste sans que le symbole écrase le contenu. À l’époque, l’icône ne se clique pas encore. Elle signale seulement qu’une liste existe.
Pendant des décennies, elle reste en marge, éclipsée par les barres horizontales et les menus déroulants de Windows, de macOS, puis des sites des années 2000. Les smartphones la sortent de l’oubli au début des années 2010. Les écrans sont petits, les rubriques nombreuses, et des applications comme Facebook, LinkedIn, Airbnb ou Twitter adoptent ce bouton compact pour libérer de la place. Le responsive design, devenu la norme vers 2012, l’étend ensuite aux sites : dès que la largeur de la fenêtre ne permet plus d’afficher toute la barre de navigation, celle-ci se replie derrière trois traits. Vers 2020, les critiques sur l’ergonomie font émerger des remplaçants que nous passerons en revue plus bas.
Les raisons de son succès
Le premier argument est l’espace. Sur un écran de cinq ou six pouces, aligner huit rubriques en en-tête oblige à réduire la police ou à multiplier les lignes. Le deuxième est l’allègement visuel : une page qui propose moins de choix déstabilise moins le visiteur, ce qui réduit ce que les ergonomes nomment la charge cognitive.
La reconnaissance joue aussi. Le symbole est si répandu que les internautes l’actionnent sans réfléchir, comme un panier ou une loupe. Une fois le menu ouvert, les pages sont classées et un clic suffit pour atteindre celle que l’on cherche. Le bouton donne aussi accès aux fonctions secondaires, comme les réglages du compte ou l’aide, qui comptent pour une minorité de visiteurs mais dont l’absence les pénaliserait. Employer le même élément sur mobile, tablette et ordinateur rend enfin l’expérience homogène.
Ce que coûte un menu masqué : les chiffres de Nielsen Norman Group
La plupart des articles sur le sujet répètent que le menu burger nuit à la découvrabilité, sans montrer l’ampleur du phénomène. Nielsen Norman Group l’a mesurée en 2016. L’étude a réuni 179 participants, chargés d’accomplir deux tâches simples sur six sites réels, sur ordinateur et sur smartphone : 7digital, la BBC, Bloomberg Business, Business Insider UK, Supermarket HQ et Slate. Trois types de navigation étaient comparés : masquée sous une icône, visible dans une barre, ou combinée, avec une partie visible et une partie cachée.
Les praticiens rapportent des défauts du même ordre. Ranger une fonction dans le tiroir la rend moins importante aux yeux du visiteur, alors que « secondaire » ne veut pas dire inutile. Le taux de clic d’un menu masqué est plus faible que celui de liens visibles, et l’angle supérieur de l’écran est la zone la moins confortable pour le pouce. Sur iOS, le coin supérieur gauche accueille déjà le bouton de retour, ce qui crée un conflit si l’icône s’y trouve.
Quand l’adopter, quand l’éviter ?
Le menu burger s’impose sur un site pensé d’abord pour le mobile, où chaque centimètre compte. Il convient aux sites minimalistes qui misent sur l’image plutôt que sur la navigation, et aux pages de lancement qui ne servent qu’un objectif. Il fonctionne aussi sur ordinateur lorsque beaucoup d’options secondaires n’ont pas besoin d’être visibles en permanence.
NBC News applique une méthode peu orthodoxe : le menu burger existe sur la version de bureau, mais la barre supérieure conserve les catégories dont les articles sont les plus lus, et seules les rubriques moins consultées passent dans le tiroir. Starbucks procède selon l’appareil. Sur ordinateur, la barre affiche les récompenses, les cartes-cadeaux, la recherche de magasin et la connexion ; sur mobile, tout cela se range dans le menu, parce que le visiteur debout devant un café veut d’abord voir les offres du jour.
Les règles de conception
Le bouton doit se repérer d’un coup d’œil. Accoler le mot « Menu » à l’icône lève le doute pour les visiteurs qui ne la reconnaissent pas. Quant au placement, le coin supérieur gauche suit le sens de lecture des langues écrites de gauche à droite, tandis que le coin supérieur droit, choisi par Shopify, laisse le logo bien visible.
Dans le panneau, groupez les entrées voisines et placez en tête les plus consultées. Pour éviter le piège de la navigation cachée, adoptez une approche hybride : les deux ou trois destinations qui comptent le plus restent visibles, le reste passe dans le tiroir. Une transition douce à l’ouverture, ou une icône qui se transforme en croix, confirme au visiteur que son geste a été pris en compte, à condition que l’animation ne ralentisse pas l’appareil.
Des exemples qui fonctionnent
Telegram ouvre sur la messagerie et range tout le reste dans le tiroir en haut à gauche : nouveaux groupes, discussions secrètes, canaux, appels, messages enregistrés. Google Drive affiche d’abord les fichiers récents, ce que l’utilisateur cherche probablement, et cache derrière l’icône la corbeille, les notifications, les sauvegardes et les paramètres. LinkedIn associe l’icône à la photo de profil de l’utilisateur, ce qui indique aussitôt que le panneau contient des options liées à son compte.
Du côté des sites, Shopify cache la majeure partie de sa navigation sur petit écran et laisse au visiteur une seule action visible, démarrer l’essai gratuit. GitHub masque le tableau de bord, les demandes de fusion, les tickets et la place de marché, mais garde en pleine page les appels à l’action qui mènent aux fonctions principales.
Fabriquer un menu burger en HTML, CSS et JavaScript
Le HTML pose la structure, le CSS dessine les barres et règle l’affichage, le JavaScript ouvre et ferme le panneau.
<button id="burger" aria-expanded="false" aria-controls="nav">
<span class="barre"></span> Menu
</button>
<nav id="nav" hidden>
<ul>
<li><a href="/produits">Produits</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>.barre { position: relative; display: inline-block; width: 24px; height: 3px; background: #222; }
.barre::before, .barre::after { content: ""; position: absolute; left: 0; width: 100%; height: 3px; background: #222; }
.barre::before { top: -8px; }
.barre::after { top: 8px; }const burger = document.getElementById("burger");
const nav = document.getElementById("nav");
burger.addEventListener("click", () => {
const ouvert = burger.getAttribute("aria-expanded") === "true";
burger.setAttribute("aria-expanded", String(!ouvert));
nav.hidden = ouvert;
});Le script inverse l’état du bouton et l’attribut hidden du panneau. Si le menu occupe tout l’écran, ajoutez overflow-y: hidden sur la racine de la page pendant l’ouverture pour bloquer le défilement en arrière-plan, et masquez le bouton au-delà d’une certaine largeur avec une requête média.
Les alternatives au menu burger
Six solutions remplacent ou complètent le menu burger, chacune avec son terrain de prédilection.
- La barre de navigation permanente reste la solution la plus lisible dès que le nombre de rubriques le permet.
- Les onglets, accompagnés d’un bouton « Plus » pour les autres rubriques, gardent le principal à l’écran quand elles sont trop nombreuses.
- Sur une application mobile, la barre inférieure place les destinations sous le pouce, ce qui convient aux grands téléphones, mais elle fonctionne mal sur ordinateur.
- Le bouton d’action flottant, popularisé par Material Design de Google, convient quand l’application tourne autour d’un geste unique, comme ajouter une tâche.
- Le menu « chocolate », ainsi nommé parce que ses cases évoquent une tablette de chocolat, expose toutes les fonctions principales dès le premier regard, ce qui lui réussit sur les sites e-commerce.
- Les menus gestuels reposent sur des balayages et libèrent l’écran, au prix d’un apprentissage.
Menu burger et référencement naturel
Le menu burger n’agit pas directement sur le classement dans Google, mais il pèse sur le comportement des visiteurs, qui lui compte. Vérifiez que chaque lien du panneau figure dans le code HTML sous forme de balise a dotée d’un attribut href, afin que les robots d’indexation puissent le suivre. Évitez de reléguer derrière l’icône des pages qui comptent pour votre activité : si les visiteurs ne les trouvent pas, le temps passé sur le site et l’engagement baissent.
Faire son choix
Un site comptant peu de rubriques principales a tout intérêt à les afficher, quel que soit l’écran. Un site à l’arborescence large peut garder deux ou trois destinations visibles et confier le reste à un tiroir accompagné du mot « Menu ». Dans tous les cas, ne tranchez pas à l’instinct : mesurez le comportement de vos visiteurs avant et après le changement, puis gardez la version qui les aide à trouver ce qu’ils cherchent le plus vite.
