Hamburger vs. Kebab
Un pulsante con tre linee apre la navigazione. Un pulsante con tre puntini apre altre azioni per un elemento vicino.
Usa tre linee per la navigazione nascosta, principalmente su schermi piccoli. Usa tre punti quando le azioni aggiuntive dell’elemento non ci stanno, e nomina il pulsante “Altre azioni.”
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Menu Hamburger
Un pulsante con tre linee. Apre la navigazione principale del sito quando non c'è abbastanza spazio per mostrarla.
Su una pagina shop stretta, il pulsante Menu etichettato apre categorie, account e aiuto. Il cassetto mantiene il focus all’interno.
- 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
Pulsante menu overflow
Un piccolo pulsante, spesso mostrato come tre puntini, apre azioni meno importanti. Usalo quando quelle azioni non entrano nella pagina.
Ogni riga di progetto mostra Aperto. Duplica, Archivia e Elimina rimangono nel suo menu a discesa.
- Usalo quando
- Usalo quando un elemento ha diverse azioni secondarie e mostrare ogni pulsante affollerebbe la pagina.
- Non usarlo quando
- Non nascondere l'azione principale o un risultato distruttivo dietro un'icona non etichettata. Mantieni visibile l'unico percorso verso un'attività comune.
- Nome usato nel codice
button[aria-haspopup=menu] + role=menu
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Menu HamburgerHamburger Menu | Usalo su schermi piccoli dopo aver mantenuto visibili le destinazioni più importanti. | Non nascondere tutta la navigazione su schermi larghi. Anche l'icona ha bisogno di un nome accessibile e di uno stato espanso. | button aria-controls aria-expanded + nav |
| Pulsante menu overflowOverflow Menu Button | Usalo quando un elemento ha diverse azioni secondarie e mostrare ogni pulsante affollerebbe la pagina. | Non nascondere l'azione principale o un risultato distruttivo dietro un'icona non etichettata. Mantieni visibile l'unico percorso verso un'attività comune. | button[aria-haspopup=menu] + role=menu |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Menu Hamburger (Hamburger Menu), Pulsante menu overflow (Overflow Menu Button) per il nostro reale flusso utente. Usa questa regola: Un pulsante con tre linee apre la navigazione. Un pulsante con tre puntini apre altre azioni per un elemento vicino. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.