Hamburger vs. Kebab
Un bouton avec trois lignes ouvre la navigation. Un bouton avec trois points ouvre plus d'actions pour un élément à proximité.
Utilisez trois lignes pour la navigation masquée, principalement sur les petits écrans. Utilisez trois points lorsque les actions supplémentaires d'un élément ne rentrent pas et nommez le bouton « Plus d'actions ».
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Menu hamburger
Un bouton de menu avec trois lignes. Il ouvre la navigation principale du site quand il n'y a pas assez de place pour l'afficher.
Sur une page de boutique étroite, le bouton Menu étiqueté ouvre les catégories, le compte et l'aide. Le tiroir maintient le focus à l'intérieur.
- Utilisez-le lorsque
- Utilisez-le sur de petits écrans après avoir gardé les destinations les plus importantes visibles.
- Ne l'utilisez pas lorsque
- Ne cachez pas toute la navigation sur les écrans larges. L'icône doit également avoir un nom accessible et un état étendu.
- Nom utilisé dans le code
button aria-controls aria-expanded + nav
Bouton du menu de débordement
Un petit bouton, souvent représenté par trois points, ouvre des actions moins importantes. Utilisez-le quand ces actions ne tiennent pas sur la page.
Chaque ligne de projet affiche Ouvert. Dupliquer, Archiver et Supprimer restent dans son menu déroulant.
- Utilisez-le lorsque
- Utilisez-le lorsqu'un élément a plusieurs actions secondaires et que montrer chaque bouton surchargerait la page.
- Ne l'utilisez pas lorsque
- Ne cachez pas l'action principale ou un résultat destructeur derrière une icône non étiquetée. Gardez le seul chemin vers une tâche courante visible.
- Nom utilisé dans le code
button[aria-haspopup=menu] + role=menu
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| Menu hamburgerHamburger Menu | Utilisez-le sur de petits écrans après avoir gardé les destinations les plus importantes visibles. | Ne cachez pas toute la navigation sur les écrans larges. L'icône doit également avoir un nom accessible et un état étendu. | button aria-controls aria-expanded + nav |
| Bouton du menu de débordementOverflow Menu Button | Utilisez-le lorsqu'un élément a plusieurs actions secondaires et que montrer chaque bouton surchargerait la page. | Ne cachez pas l'action principale ou un résultat destructeur derrière une icône non étiquetée. Gardez le seul chemin vers une tâche courante visible. | button[aria-haspopup=menu] + role=menu |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Menu hamburger (Hamburger Menu), Bouton du menu de débordement (Overflow Menu Button) pour notre flux utilisateur réel. Utilisez cette règle : Un bouton avec trois lignes ouvre la navigation. Un bouton avec trois points ouvre plus d'actions pour un élément à proximité. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.