O que é Menu Hambúrguer?
Menu Hambúrguer, também chamado de hamburger menu ou menu mobile, é o ícone de três linhas empilhadas que abre a navegação do site. O nome vem do desenho: duas linhas nas pontas lembram o pão e a do meio lembra o recheio.
O menu hambúrguer nasceu de uma limitação real. Em uma tela de celular, cinco ou seis itens de menu não cabem lado a lado sem virar um amontoado de texto minúsculo. O botão resolve isso guardando os links atrás de um toque.
A economia de espaço tem um custo: o que está escondido recebe menos cliques. O visitante precisa descobrir o botão, tocar nele e só então ver as opções. Por isso, muitos sites deixam a ação principal visível fora do menu, como um botão de contato ou de compra sempre à vista no topo.
Como funciona na prática?
A construção envolve quatro elementos. Primeiro, o ícone, geralmente no canto superior direito ou esquerdo. Segundo, o painel de navegação, que aparece deslizando de lado ou cobrindo a tela. Terceiro, a forma de fechar: um “X” claro, um toque fora do painel ou o gesto de deslizar. Quarto, o comportamento por breakpoint, já que em telas largas o menu costuma voltar a ser horizontal.
A acessibilidade entra aqui. O botão precisa de um rótulo que os leitores de tela anunciem, precisa funcionar pelo teclado e precisa informar se o menu está aberto ou fechado. Quando o painel abre, o foco do teclado deve ir para dentro dele; quando fecha, deve voltar ao botão. Uma variação comum acrescenta a palavra “Menu” ao lado das três linhas, deixando a função explícita.
Exemplos de uso
- Um restaurante mantém o menu hambúrguer com cardápio, reservas e localização, e deixa o botão de WhatsApp fixo no topo. A ação que gera pedido continua visível.
- Um site institucional usa o botão apenas abaixo de 900 pixels de largura. No desktop, os seis itens do menu aparecem lado a lado, sem precisar esconder nada.
Erros comuns
- Esconder a ação principal do site dentro do menu, em vez de deixá-la visível como botão.
- Usar menu hambúrguer no desktop, onde há espaço de sobra para mostrar os links.
- Entregar um ícone sem rótulo e sem contraste suficiente, o que atrapalha a descoberta.
- Empilhar dezenas de links no painel, criando uma lista longa e sem hierarquia.
Perguntas frequentes sobre Menu Hambúrguer
Menu hambúrguer prejudica a conversão?
Pode prejudicar quando esconde caminhos importantes. Links guardados atrás de um toque recebem menos cliques do que links visíveis. A saída prática é manter a ação principal fora do menu, como botão de contato, orçamento ou compra, e deixar no hambúrguer o que serve à navegação secundária.
Devo usar menu hambúrguer no desktop?
Em telas largas, os itens do menu geralmente cabem na horizontal, e mostrá-los reduz um passo do caminho do visitante. O botão faz sentido no desktop em interfaces com navegação muito extensa, como painéis internos, onde o menu lateral ocupa espaço útil da área de trabalho.
Onde colocar o botão do menu hambúrguer?
O canto superior é o padrão que as pessoas já reconhecem, à direita ou à esquerda do logo. Em celulares grandes, alguns sites levam a navegação para uma barra inferior, mais fácil de alcançar com o polegar. O importante é manter a posição consistente em todas as páginas.