Hamburger Menu
Menu Hamburger
Un pulsante con tre linee. Apre la navigazione principale del sito quando non c'è abbastanza spazio per mostrarla.
Un esempio vero
Su una pagina shop stretta, il pulsante Menu etichettato apre categorie, account e aiuto. Il cassetto mantiene il focus all’interno.
Parti principali
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
Usalo quando
Usalo su schermi piccoli dopo aver mantenuto visibili le destinazioni più importanti.
Non usarlo quando
Non nascondere tutta la navigazione su schermi larghi. Anche l'icona ha bisogno di un nome accessibile e di uno stato espanso.
Nome usato nel codice
button aria-controls aria-expanded + nav Prima di spedire
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: Su una pagina shop stretta, il pulsante Menu etichettato apre categorie, account e aiuto. Il cassetto mantiene il focus all’interno. Recommended pattern: Menu Hamburger (Hamburger Menu). Why it fits: Usalo su schermi piccoli dopo aver mantenuto visibili le destinazioni più importanti. Do not use it when: Non nascondere tutta la navigazione su schermi larghi. Anche l'icona ha bisogno di un nome accessibile e di uno stato espanso. 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): Questo non è uno standard normativo. Il suo nome, limiti e comportamento previsto possono cambiare da una fonte all'altra. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how Menu Hamburger (Hamburger Menu) is used now. Definition: Un pulsante con tre linee. Apre la navigazione principale del sito quando non c'è abbastanza spazio per mostrarla. 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.