Menu burger

Sommaire

Principe.
Menu burger réalisé avec une fenêtre modale.
Menu burger réalisé avec un panneau dépliant.
Particularité du bouton burger.

Principe

Un menu burger se présente généralement sous la forme d’un bouton icône qui permet d’afficher un menu.

Cette fiche présente deux façons différentes d’implémenter un menu burger.

Menu burger réalisé avec une fenêtre modale

Voir la fiche Fenêtres Modales pour accéder aux particularités de développement de ce composant.

Menu burger réalisé avec un panneau dépliant

Voir la fiche Panneaux Dépliants pour accéder aux particularités de développement de ce composant.

Particularité du bouton burger

La balise <nav role="navigation"> doit être utilisée pour structurer le bouton burger.
L’attribut aria-label doit être intégré dans cette même balise <nav role="navigation"> et renseigné avec le nom du menu correspondant (par exemple aria-label="Menu principal").

6 commentaires

Par Castilla, le 19 mars 2025 à 11h18.

Bonjour,

Combien de niveaux peut-on intégrer dans un burger menu ? Est-on limité à 2 ou 3 panneaux ?

Répondre
- Par Romain Desjardins (Atalan), le 20 mars 2025 à 5h29.
  
  Bonjour,
  
  En termes d’accessibilité numérique, il n’y a pas de limite aux nombres de niveaux que l’on peut intégrer dans un menu.
  
  Cependant, plus le nombre est élevé, plus le menu sera compliqué à lire et à parcourir, pour tout le monde. Le sujet est donc plutôt lié à l’UX ici.
  
  Belle journée,
  Romain
  
  Répondre
Par Olivier Bartoli, le 24 janvier 2023 à 17h12.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

Dans les exemples en lien, la touche « Échap » ne referme pas le menu…

Répondre
- Par Romain Desjardins (Atalan), le 25 janvier 2023 à 9h54.
  
  Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.
  
  Bonjour Olivier,
  
  Effectivement la touche « Échap » ne fonctionne pas dans le premier lien, en revanche elle est bien fonctionnelle dans le deuxième lien (il faut pour cela bien que le focus soit placé dans le menu).
  
  Dans tous les cas, je vous remercie d’avoir pointé ce problème. Ces exemples ne sont en effet plus totalement conformes depuis la mise à jour du RGAA 4.1, il faudra les modifier.
  
  Voici un exemple conforme de menu déroulant correspondant au motif de conception « Disclosure » dans le guide pratique du développement ARIA, venant du W3C. Vous y trouverez l’ensemble du socle HTML et des interactions et comportements à suivre pour la réalisation d’un menu hamburger.
  
  Bien à vous,
  Romain
  
  Répondre
Par Mous, le 10 mars 2022 à 14h28.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

C’est pour tenir en compte les anciennes versions des navigateurs qui ne prennent pas en charge le role= »navigation » natif de la balise .
Il peut y’avoir des personnes qui utilisent par exemple windows xp et ne pourront pas avoir une mises à jour des dernières versions des navigateurs. Quand on fait de l’accessibilité il faut ratisser large pour qu’un plus grand nombre de personne puisse en bénéficier. Voila , je vous ai exposé ma vision des choses même si le validateur de code HTML w3c dit la même chose que vous

Répondre
Par Olivier, le 21 décembre 2021 à 19h13.

Ce commentaire a été publié il y a plus de 2 ans. Il se peut que son contenu ne soit plus d'actualité.

Pourquoi utiliser le rôle navigation et une balise nav ? Cela fait double emploi.

Répondre

Laisser un commentaire

Mises à jour

28/08/2024: Mise à jour mineure.
27/10/2025: Mise à jour mineure.
28/11/2025: Ajout de l’exemple du menu burger avec une fenêtre modale et réécriture de la fiche.

Haut de page