Hamburger vs. Kebab
Um botão de três linhas abre a navegação. Um botão de três pontos abre mais ações para um item próximo.
Use três linhas para navegação oculta, principalmente em telas pequenas. Use três pontos quando as ações de itens extras não couberem, e nomeie o botão como “Mais ações.”
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Menu Hamburger
Um botão de menu com três linhas. Abre a navegação principal do site quando não há espaço suficiente para mostrá-la.
Em uma página de loja estreita, o botão Menu rotulado abre categorias, conta e ajuda. A gaveta mantém o foco dentro.
- Use-o quando
- Use-o em telas pequenas após manter os destinos mais importantes visíveis.
- Não o use quando
- Não esconda toda a navegação em telas largas. O ícone também precisa de um nome acessível e de um estado expandido.
- Nome usado no código
button aria-controls aria-expanded + nav
Botão de Menu de Transbordamento
Um botão pequeno, muitas vezes mostrado como três pontos, abre ações menos importantes. Use-o quando essas ações não cabem na página.
Cada linha de projeto mostra Aberto. Duplicar, Arquivar e Excluir permanecem em seu menu de overflow.
- Use-o quando
- Use-o quando um item tem várias ações secundárias e mostrar todos os botões iria sobrecarregar a página.
- Não o use quando
- Não esconda a ação principal ou um resultado destrutivo atrás de um ícone sem rótulo. Mantenha o único caminho para uma tarefa comum visível.
- Nome usado no código
button[aria-haspopup=menu] + role=menu
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Menu HamburgerHamburger Menu | Use-o em telas pequenas após manter os destinos mais importantes visíveis. | Não esconda toda a navegação em telas largas. O ícone também precisa de um nome acessível e de um estado expandido. | button aria-controls aria-expanded + nav |
| Botão de Menu de TransbordamentoOverflow Menu Button | Use-o quando um item tem várias ações secundárias e mostrar todos os botões iria sobrecarregar a página. | Não esconda a ação principal ou um resultado destrutivo atrás de um ícone sem rótulo. Mantenha o único caminho para uma tarefa comum visível. | button[aria-haspopup=menu] + role=menu |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Menu Hamburger (Hamburger Menu), Botão de Menu de Transbordamento (Overflow Menu Button) para o nosso fluxo real de usuário. Use esta regra: Um botão de três linhas abre a navegação. Um botão de três pontos abre mais ações para um item próximo. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.