Existe um detalhe no design de sites e aplicativos que a maioria das pessoas nunca percebe conscientemente — mas que toda equipe de produto discute por horas. São três linhas horizontais no canto da tela. Ou três pontos empilhados. Ou uma grade de quadradinhos. Cada um desses símbolos tem um nome, uma origem e um comportamento de uso muito específico. E escolher o errado pode custar caro em conversão, retenção e usabilidade.
Neste guia, você vai conhecer os 12 ícones de menu de navegação mais utilizados no design digital moderno, entender a lógica por trás de cada um e saber, com precisão, qual deles serve para o seu projeto.
Por que o ícone de menu importa mais do que parece
Antes de entrar nos detalhes de cada símbolo, vale entender o que está em jogo.
Estudos de eye-tracking conduzidos pela Nielsen Norman Group mostram que usuários varrem a interface de um aplicativo nos primeiros 2 a 3 segundos em busca de pontos de ancoragem — elementos que orientam a navegação. O ícone de menu é um desses pontos. Quando ele está no lugar errado, tem a forma errada ou comunica a função errada, o usuário hesita. E hesitação, em experiência digital, é o primeiro passo para o abandono.
Além disso, com a multiplicação de dispositivos — smartphones de 4,7 polegadas, tablets de 12 polegadas, smart TVs, interfaces de carro — o mesmo produto frequentemente precisa de ícones diferentes para contextos diferentes. Conhecer o vocabulário completo não é capricho de designer: é requisito funcional.
Os 12 tipos de ícone de menu explicados
- Hamburger — o mais famoso (e mais mal usado)
Três linhas horizontais paralelas. O ícone que praticamente inventou a navegação oculta no mobile. Criado em 1981 pelo designer Norm Cox para o sistema operacional Xerox Star, o Hamburger ficou décadas sem uso e voltou com força total quando os smartphones tornaram o espaço de tela um bem escasso.
Quando usar: menus laterais que se expandem (drawers), navegação principal em mobile, estruturas com muitos itens que não cabem em uma barra inferior.
Quando evitar: quando os itens do menu são poucos o suficiente para ficarem visíveis. Esconder a navegação tem um custo real — pesquisas mostram que menus visíveis aumentam o engajamento com as seções de conteúdo em até 75% comparado ao Hamburger oculto.
Erro mais comum: usar o Hamburger em desktop quando há espaço de sobra para mostrar o menu. É preguiça de design disfarçada de minimalismo.
- Kebab — três pontos na vertical
Três círculos empilhados verticalmente. O nome vem do espeto de kebab, e a metáfora é precisa: são opções enfileiradas, uma sobre a outra, esperando para serem acessadas.
Quando usar: menus contextuais ligados a um item específico — uma linha de tabela, um card de conteúdo, um arquivo em uma lista. O Kebab é o menu de "ações para este item", não de "navegação do app".
Plataformas que mais usam: Android (especialmente no Material Design do Google), aplicativos de produtividade como Google Drive, Trello e Notion.
Diferença crítica do Hamburger: o Hamburger é global, o Kebab é contextual. Se você usa um Kebab no topo da página para representar o menu principal do site, está criando confusão. O usuário vai procurar ações relacionadas ao contexto atual, não a rota de navegação do sistema.
- Meatballs — três pontos na horizontal
A versão horizontal do Kebab. Mesma lógica, disposição diferente — e isso muda tudo em termos de percepção espacial.
Quando usar: menus de opções adicionais em interfaces com layout predominantemente horizontal, como barras de ferramentas, navbars e carrosséis de conteúdo. O Twitter (hoje X), o YouTube e o LinkedIn usam o Meatballs extensivamente para ações de conteúdo individual (salvar, reportar, compartilhar, ocultar).
Observação de UX: a orientação horizontal do Meatballs comunica sutilmente que as opções são complementares ao fluxo horizontal da interface. É um detalhe fino, mas usuários percebem — não conscientemente, mas comportamentalmente.
- Doner — linhas de tamanhos diferentes
Parece um Hamburger desconstruído: três linhas, mas de comprimentos variados — geralmente a do meio é mais curta, criando uma hierarquia visual. O nome é inspirado na fatia de kebab doner visto de frente.
Quando usar: quase sempre em combinação com filtros ou ordenação. O Doner é o ícone canônico do "refinar resultados". Se você já usou um e-commerce e clicou naquele ícone de linhas assimétricas para filtrar por preço ou categoria, usou um Doner.
Contexto ideal: aplicativos de busca, marketplaces, interfaces de listagem de dados, dashboards analíticos com múltiplas camadas de configuração.
- Bento — grade de pontos ou quadradinhos
Uma grade 3×3 de pontos ou pequenos quadrados, batizada em homenagem à marmita japonesa bento — onde diferentes compartimentos organizam diferentes tipos de comida. No design, organiza diferentes seções ou aplicativos.
Quando usar: launchers de aplicativos, dashboards com múltiplos módulos, suítes de software com vários produtos integrados. O exemplo mais famoso é o botão de apps do Google, no canto superior direito do Gmail ou do Google Drive — aquela grade de quadradinhos que abre todos os produtos da empresa.
Por que funciona tão bem em suítes: o Bento comunica visualmente "aqui tem vários mundos possíveis". Não é uma lista, é uma grade — e grades evocam categorias paralelas, não hierarquias sequenciais.
- Batata Frita — três barras largas e arredondadas
Três barras horizontais grossas e arredondadas, como tiras de batata frita vista de cima. Visualmente parece um Hamburger, mas as barras são mais espessas e compactas — o que comunica algo diferente: uma lista de ações organizadas, não uma navegação principal.
Quando usar: listas de opções ou ações organizadas verticalmente dentro de um painel ou módulo específico. Muito comum em menus de configuração, sidebars de ferramentas e listas de atalhos dentro de aplicativos como o Spotify e o Notion.
Diferença do Hamburger: o Hamburger abre a navegação do sistema. A Batata Frita abre uma lista de ações contextual. A espessura das barras funciona como sinal visual de "peso" maior — ações mais robustas ou completas do que simples links de navegação.
- Escada — linhas crescentes ancoradas à esquerda
Três linhas horizontais com comprimentos crescentes, todas alinhadas à esquerda — a menor no topo, a maior na base. O resultado é exatamente o perfil de uma escada ascendendo da esquerda para a direita.
Quando usar: interfaces que comunicam progresso, hierarquia ou níveis de profundidade. Muito comum em indicadores de sinal (o ícone de Wi-Fi é uma variação curva desse conceito), em telas de onboarding com etapas numeradas, e em dashboards que exibem rankings ou estruturas hierárquicas de navegação.
Nuance importante: a leitura visual de baixo para cima — linha curta no topo, linha longa na base — comunica "estou começando de algum ponto e avanço". Use esse ícone quando quiser sinalizar que o usuário está em um ponto específico de uma jornada mais ampla.
- Oreo — três camadas (grossa, fina, grossa)
Duas barras grossas nas extremidades com uma linha fina no centro — exatamente a estrutura de um biscoito Oreo visto de frente: wafer, recheio, wafer. O ícone representa visualmente a ideia de um item com múltiplas camadas internas.
Quando usar: interfaces que representam um único elemento com diferentes camadas de detalhe — como um card expansível, um documento com seções, ou um item de configuração com sub-opções. O contraste de espessura entre as barras externas e o centro fino é o sinal visual de que existe "algo entre as camadas".
Aviso de uso: o Oreo é um ícone de nicho. Fora de contextos muito específicos, pode confundir. Use sempre com rótulo textual nas primeiras exposições, pois o padrão de três linhas iguais (Hamburger) está muito mais consolidado no repertório do usuário médio.
- Veggie — duas linhas simples
Apenas duas linhas horizontais, sem marcadores, sem variação de espessura. O Veggie é o mais minimalista de todos os ícones desta lista — e também o menos utilizado em interfaces reais, o que explica o nome bem-humorado: é o ícone "vegetariano" do design, sem adicionais.
Quando usar: navegação associada a temas ou categorias específicas em interfaces muito enxutas, onde o espaço é extremamente limitado e o usuário já está familiarizado com o padrão. Também aparece como marcador de seção em interfaces de leitura, como leitores de e-book ou news apps simplificados.
Por que é pouco usado: com apenas dois elementos, o Veggie carrega pouca informação visual. O usuário dificilmente vai intuir que aquelas duas linhas abrem um menu — a menos que esteja em um contexto onde esse padrão já foi estabelecido pela interface. Sempre acompanhe com rótulo textual.
- Hotdog — três barras ovais bem grossas
Três barras horizontais muito grossas e altamente arredondadas — quase ovais, como fatias de um sanduíche visto de frente. O Hotdog leva o conceito do Hamburger ao extremo: mesma estrutura de três linhas, mas com muito mais "corpo" visual.
Quando usar: menus compactos onde cada opção tem peso visual equivalente, filtros de visualização rápida, ou interfaces que precisam comunicar densidade de conteúdo. O volume das barras sugere que cada item tem substância — não são apenas links leves, são blocos de conteúdo ou ação.
Contexto real: o Hotdog aparece em players de mídia para alternar entre modos de exibição (lista compacta vs. expandida), em apps de leitura de e-books, e em interfaces onde o usuário vai alternar frequentemente entre dois ou três estados pré-definidos. A espessura das barras facilita o toque em telas de baixa precisão.
- Bolo — linhas com elemento principal em destaque
Uma composição que lembra um bolo visto de frente: um elemento circular no topo com linhas na base. Comunica hierarquia com item principal em evidência.
Quando usar: navegação hierárquica onde existe um item principal e subitens relacionados. Menus em cascata, sistemas de categorias com subcategorias, interfaces onde o usuário precisa entender que está "dentro de" algo maior.
Por que a hierarquia visual importa: quando o usuário está em uma subpágina de um sistema complexo, ele precisa de pistas visuais constantes de onde está na estrutura. O Bolo, usado corretamente, age como um mapa implícito — "você está aqui, e aqui pertence a este grupo".
- Chocolate — grade de quadradinhos maiores
Uma grade de quadrados uniformes — similar ao Bento, mas com blocos maiores e mais espaçados, como as divisões de uma barra de chocolate. Enquanto o Bento evoca "múltiplos aplicativos", o Chocolate evoca "múltiplos blocos do mesmo tipo".
Quando usar: seletores de bloco em editores visuais (como o WordPress Gutenberg, o Notion ou o Webflow), galerias de conteúdo onde cada item é um bloco visual equivalente, ou interfaces de escolha de template onde todos os itens têm o mesmo peso hierárquico.
Diferença sutil do Bento: no Bento, os itens podem ser diferentes entre si (diferentes apps, diferentes módulos). No Chocolate, todos os blocos são equivalentes — você está escolhendo dentro de uma coleção uniforme.
Como escolher o ícone certo para o seu projeto
Depois de conhecer os 12 tipos, a pergunta prática é: como decidir? Quatro perguntas resolvem a maioria dos casos:
1. O menu é global ou contextual? Global (navega pelo app/site inteiro) → Hamburger, Veggie, Batata Frita Contextual (ações para este item específico) → Kebab, Meatballs
2. O conteúdo é linear ou em grade? Linear (lista, fluxo, progresso) → Hamburger, Batata Frita, Escada, Hotdog Em grade (módulos, categorias, apps) → Bento, Chocolate
3. Existe hierarquia ou filtro envolvido? Hierarquia de conteúdo → Bolo, Escada Filtros e ordenação → Doner
4. Qual o dispositivo principal? Mobile com navegação principal → Hamburger, Batata Frita Desktop com barra de ferramentas → Meatballs, Doner, Kebab Multi-produto ou dashboard → Bento, Chocolate
O erro que a maioria dos projetos comete
O problema mais recorrente não é usar o ícone errado — é usar o ícone certo sem rótulo textual nas primeiras interações do usuário.
Pesquisas de usabilidade mostram consistentemente que ícones sem texto reduzem a taxa de acerto na primeira tentativa em até 40% para usuários que estão usando o produto pela primeira vez. O Hamburger pode ser o ícone mais reconhecível do design digital, mas ele ainda beneficia de um "Menu" ao lado dele — especialmente em produtos voltados para públicos com menos familiaridade com interfaces digitais.
A regra pragmática: use o ícone para economizar espaço. Use o rótulo para garantir clareza. Quando tiver espaço suficiente, use os dois.
Tendências para 2026
O design de interfaces está caminhando em uma direção interessante: a redução do uso do Hamburger em favor de navegação persistente e visível, especialmente em mobile. Plataformas como Instagram, TikTok e YouTube migraram de menus ocultos para barras de navegação inferiores com ícones e rótulos sempre visíveis. A razão é simples — esconder a navegação principal aumenta o esforço cognitivo do usuário.
Por outro lado, ícones como Bento e Chocolate ganham cada vez mais espaço com a popularização dos editores visuais no-code e low-code. Ferramentas como Webflow, Framer e Notion estão educando uma geração de usuários a reconhecer e usar a metáfora dos blocos — o que valoriza esses dois ícones em interfaces de criação de conteúdo.
O futuro do ícone de menu não é escolher um e usar para sempre. É ter um vocabulário completo e saber qual palavra usar em cada sentença.
Conclusão
Três linhas. Três pontos. Uma grade. Esses símbolos parecem simples demais para merecer tanto cuidado. Mas por trás de cada um existe uma decisão de UX que afeta diretamente como o usuário vai (ou não vai) navegar pelo seu produto.
Conhecer os 12 ícones de menu — Hamburger, Kebab, Meatballs, Doner, Bento, Batata Frita, Escada, Oreo, Veggie, Hotdog, Bolo e Chocolate — não é sobre decorar nomes curiosos. É sobre ter um repertório preciso para tomar decisões de design fundamentadas, não intuitivas.
E no fim, é isso que separa um produto que as pessoas usam de um produto que as pessoas abandonam: a qualidade das micro-decisões que nunca aparecem nos headlines, mas que estão em cada clique, em cada scroll, em cada "como eu faço para ir para essa página?".
Gostou deste conteúdo? A Grude® produz vídeos institucionais, conteúdo para redes sociais e estratégias de marketing digital para empresas do Vale do Aço e região. Entre em contato e descubra como transformamos a comunicação da sua marca.