Hamburger Menu
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.
Un vrai exemple
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.
Parties principales
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
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 Avant d'expédier
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Menu hamburger (Hamburger Menu). User context: 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. Recommended pattern: Menu hamburger (Hamburger Menu). Why it fits: Utilisez-le sur de petits écrans après avoir gardé les destinations les plus importantes visibles. Do not use it when: Ne cachez pas toute la navigation sur les écrans larges. L'icône doit également avoir un nom accessible et un état étendu. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Ce n'est pas une norme normative. Son nom, ses limites et son comportement attendu peuvent varier d'une source à l'autre. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Menu hamburger (Hamburger Menu) is used now. Definition: 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. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.