Nouveau Components

Menu burger

Un menu burger principal est généralement représenté par trois lignes empilées, formant une icône symbolisant un menu caché. Lorsque l’utilisateur clique ou appuie sur ces lignes, un menu coulissant ou un tiroir apparaît, révélant une liste d’éléments de navigation ou d’autres composants interactifs.

Quand utiliser un menu burger

  1. Un menu burger peut être utilisé pour offrir une interface épurée et centrée sur le contenu, en masquant les options de navigation jusqu’à ce qu’elles soient nécessaires.
  2. Si votre site comporte de nombreuses options de navigation, le menu burger permet de désencombrer l’apparence visuelle en regroupant ces options dans une barre latérale ou un menu déroulant.

Quand ne pas utiliser un menu burger

  1. Sur les sites de bureau disposant d’un large espace. Utiliser une barre ou un menu de navigation traditionnel améliore l’ergonomie en rendant les options immédiatement visibles.
  2. Pour les sections essentielles du site. Si certaines rubriques doivent être vues dès l’arrivée (par ex. sélecteur de langue), un menu burger risquerait de les masquer et de diminuer leur visibilité.
  3. Lorsque le site ne comporte que quelques pages. Il est généralement plus efficace d’afficher directement les liens de navigation pour un accès simple et rapide.

Sur cette page

Fichiers et ressources Figma

Les concepteurs peuvent importer l’ensemble des documents de conception depuis notre répertoire Figma à l’aide du lien ci-dessous. Cela simplifie le processus de conception et garantit un accès facile aux ressources les plus récentes, pour un flux de travail plus efficace.

Vous pouvez également utiliser l’aperçu interactif du prototype ci-dessous comme exemple pratique illustrant la manière dont le composant est censé fonctionner. Cette représentation interactive sert de guide visuel pour comprendre le comportement et la fonctionnalité attendus.

Conception

Voir le fichier dans Figma

Ressources

Écran d’ordinateur (AC-001)

Tablette (AC-001)

Mobile (AC-001)

Prototype

Voir le fichier dans Figma

Sur cette page

Mots-clés

  • Menu burger : bouton qui affiche ou masque la navigation d’un site web.
  • Navigation : structure permettant aux utilisateurs de se déplacer à travers un site web.
  • Menu : ensemble d’options ou d’actions parmi lesquelles les utilisateurs peuvent faire un choix.
  • Élément de menu parent : élément principal du menu sous lequel se trouvent des sous-éléments appelés éléments enfants. Il peut aussi être considéré comme un élément de premier niveau.
  • Sous-menu : ensemble d’éléments de navigation secondaires affichés lorsqu’un utilisateur interagit avec un élément de menu parent.
  • Liste : élément qui organise des objets ou valeurs dans une séquence ordonnée (numérotée) ou non ordonnée (à puces).
  • Lien : permet aux utilisateurs de passer d’un emplacement à un autre, au sein de la même page ou vers une autre page web.

Détail des composants

La finalité du menu burger est d’afficher ou masquer la navigation.

  1. Utiliser une balise <button> avec l’icône hamburger pour basculer la visibilité du menu.
  2. Utiliser des libellés explicites (par ex. aria-label="Menu principal") afin qu’il soit clair que ce bouton ouvre un menu.
  3. Utiliser des attributs WAI-ARIA tels que aria-haspopup="true" et aria-expanded="false" pour indiquer la présence d’un menu fermé. Mettre aria-expanded à true signifie que le menu burger est ouvert.
  4. Comme le menu burger contrôle la visibilité d’une navigation située dans un élément séparé, l’utilisation de l’attribut WAI-ARIA aria-controls est essentielle pour définir cette relation. Cet attribut contient l’id de la balise de navigation (aria-controls="id de la balise <nav> contenant le menu masqué").
HTML
<button aria-label="Menu principal" aria-expanded="false" aria-controls="navigation" id="burger"></button>

Établit une section comme repère de navigation. Divers types de navigation existent (principale, secondaire, fil d’Ariane, latérale), la barre de navigation servant de navigation principale du site.

  1. Identifiez le menu à l’intérieur, idéalement en utilisant la balise HTML5 <nav> pour permettre aux utilisateurs d’accéder directement au menu.
  2. Libellez les menus pour en faciliter la compréhension. Employez de simples libellés descriptifs afin que les utilisateurs distinguent plusieurs navigations. Utilisez l’attribut aria-label pour nommer une navigation, par exemple aria-label="Navigation principale".
  3. N’oubliez pas l’identifiant unique sur la balise <nav>, qui doit être renseigné dans l’attribut aria-controls du menu burger.
HTML
<nav id="navigation" role="navigation" aria-label="Navigation principale">
  1. Définir la structure du menu sous forme de liste. Elle permet aux outils d’assistance d’annoncer le nombre d’éléments et de faciliter la navigation.
  2. Utiliser la balise de lien pour définir chaque élément de menu, chacun dirigeant vers une destination donnée (section de page ou nouvelle page).
  3. Utiliser un balisage pour indiquer l’élément de menu actuel (par ex. la page en cours), afin d’améliorer la navigation dans le menu. Cette indication doit être visible et comprise par les technologies d’assistance.
HTML
<ul>
    <li><a href="#">Accueil</a></li>
    <li><a href="#">A propos</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Sur cette page

Interaction au clavier

Lorsque l’utilisateur appuie sur Échap, il faut replacer le focus sur le bouton du menu burger. Cela évite la désorientation et facilite la réouverture du menu sans devoir naviguer pour revenir sur le bouton.

Accordion keyboard navigation function table
Touche Fonction
Tab Si le menu burger est fermé :
  • déplace le focus vers le prochain élément interactif de la page.
Si le menu burger est ouvert :
  • déplace le focus à travers les éléments de la navigation ouverte, en commençant par le premier élément du menu.
Si le focus est sur le dernier élément du menu :
  • déplace le focus vers le prochain élément interactif en dehors du menu sur la page.
Espace/Entrée
  • Si la navigation est masquée : ouvre le menu.
  • Si la navigation est affichée : ferme le menu.
  • Si le focus est sur un élément du menu : active le lien/élément focalisé et mène l’utilisateur vers la page correspondante.
Touche Échap Ferme le menu et replace le focus sur le bouton du menu burger.

Sur cette page