O que é o menu de três pontos na prática
O 3 pontos aparece em praticamente toda interface digital que você usa no dia a dia. É aquele ícone com três pontinhos verticais ou horizontais que geralmente fica no canto superior direito de telas, barra de ferramentas ou listas. Clicar nele abre um menu suspenso com ações adicionais que não têm espaço suficiente para ficar visíveis o tempo todo.
o'que significa 3 pontos
Não existe um termo oficial universal. Na indústria de design de interface, chama-se menu de mais opções, more options menu ou simplesmente kebab menu (quando os pontos estão verticais). Quando os pontos ficam na horizontal, algumas vezes chamam de bullet menu. Os dois estilos servem para a mesma coisa: esconder funcionalidades secundárias atrás de um botão que abre um dropdown. Acho útil entender por que ele existe antes de entrar em como funciona. Telas são limitadas. Você não pode colocar todos os botões do app visíveis ao mesmo tempo sem transformar a interface em uma caixa de ferramentas. O menu de 3 pontos resolve isso agrupando ações menos frequentes em um container que só aparece quando o usuário pede. Isso economiza espaço e mantém o visual limpo.
Como identificar e usar em diferentes contextos
Vou dividir por onde você provavelmente vai encontrar, porque o comportamento muda dependendo da plataforma. No navegador: no Chrome, Edge e Firefox, os três pontos ficam no canto superior direito da janela. Clicar abre o menu principal com opções como favoritos, histórico, configurações e extensão. O mesmo vale para YouTube, Gmail, Google Docs — todos usam o padrão Google Material Design. Os pontos estão no canto superior direito do card ou da barra superior.
No WhatsApp: os três pontos ficam no canto superior direito, tanto na conversa quanto na tela inicial. Eles abrem opções como novos contatos, novas comunidades, configuração da conta, ajuda e sair. No Android, se você tocar e segurar um messageiro específico, também surge um menu com três pontos que dá opções como silenciar, arquivar ou bloquear. No Instagram: aqui é mais fragmentado. Nos stories, tem os três pontinhos no canto inferior direito que abrem opções de reação e replicação. No feed, cada post tem um ícone de três pontos no canto superior direito que permite reportar, silenciar ou salvar. Nas publicações do Facebook integrado, o comportamento é similar.
No TikTok: os três pontos aparecem abaixo de cada vídeo, à direita. Toque neles para ver opções como reportar, adicionar aos favoritos, compartilhar, baixar (em alguns casos) e ver informações do criador. No Spotify: ao lado de cada música, álbum ou playlist, os três pontos verticais abrem ações como adicionar à fila, compartilhar, ir para o artista, adicionar à playlist e ver letras.
O que acontece quando você clica
O comportamento padrão é abrir um painel flutuante sobreposto ao conteúdo atual. Esse painel mostra uma lista vertical de ações com ícone e texto. A ordem segue uma lógica que varia conforme o produto, mas geralmente começa com a ação mais comum (compartilhar, salvar) e termina com ações destrutivas ou menos usadas (reportar, excluir, silenciar). Em telas de computador, o menu aparece abaixo ou ao lado do ícone, dependendo da direção do espaço disponível. Em mobile, costuma ser um sheet que sobe de baixo ou um popover centralizado. A diferença técnica é mínima para o usuário final, mas importante para desenvolvedores que precisam ajustar o posicionamento para não cortar opções em telas pequenas.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Problema real que eu enfrentei e como resolvi
Num projeto de dashboard interno que fizemos há alguns anos, o menu de 3 pontos precisava ter mais de oito opções. O padrão de diseño não previa isso e o menu simplesmente cortava as opções que ultrapassavam a altura da tela. Usuários reclamavam que não conseguiam acessar funções como exportar para CSV ou definir permissões avançadas. A solução foi substituir o menu tradicional por um drawer lateral que abria ao clicar no ícone, em vez de um popover. Isso eliminou o limite de altura e ainda deixou espaço para descrições mais longas em cada item. Levou cerca de três dias de desenvolvimento para implementar com acessibilidade correta, incluindo navegação por teclado e foco gerenciado.
Pegadinhas que iniciantes costumam perder
Muita gente não sabe que os três pontos podem ter comportamentos diferentes dependendo da versão do app ou do sistema operacional. No WhatsApp Web, por exemplo, o menu de 3 pontos funciona de forma ligeiramente diferente do app móvel — algumas opções aparecem apenas no desktop. Isso acontece porque as equipes de produto mantêm menues separados para cada plataforma. Outro detalhe importante: o menu de 3 pontos nem sempre indica "mais opções". Em alguns produtos, ele tem função específica. No Canva, por exemplo, os três pontos num elemento selecionado abrem opções de alinhamento e distribuição, não um menu genérico. Verificar o contexto antes de assumir é importante para não confundir funcionalidades.
Também vale saber que em interfaces com tema escuro, o ícone de 3 pontos às vezes fica com contraste baixo demais. Já vi isso em vários apps que usam ícones cinza claro sobre fundo branco. A solução correta seria ajustar o contraste ou permitir que o usuário troque o ícone, mas a maioria dos apps não faz isso.
Quando o menu de 3 pontos é uma má escolha
O principal problema é descoberta. Usuários que não conhecem o padrão não sabem que aquele ícone existe. Estudos de usabilidade mostram que menos de 40% dos usuários novatos identificam o menu de 3 pontos como algo clicável na primeira experiência. Para ações críticas do produto, como salvar um documento ou enviar uma mensagem, dependendo exclusivamente de um menu escondido é arriscado. A alternativa mais segura é usar botões visíveis para ações principais e reservar os três pontos para funções secundárias. Se você está desenvolvendo um produto, considere fazer um teste A/B simples: meça a taxa de uso de cada ação quando ela está dentro do menu de 3 pontos versus quando está como botão direto na interface. A diferença costuma ser significativa.
Outro cenário problemático é para usuários com deficiência motora. O menu de 3 pontos exige um toque preciso num ícone pequeno, o que pode ser difícil para quem tem tremor ou limitação de mobilidade fina. Garanta que todas as ações do menu sejam acessíveis por teclado também, não apenas por toque.
Download e recursos úteis
Não há um arquivo único para "baixar" o menu de 3 pontos, pois ele não é um produto independente. O que você pode baixar são kits de ícones que incluem o símbolo em diferentes formatos. Os mais usados são o Material Icons do Google (material.io/icons), o Feather Icons (feathericons.com) e o Heroicons (heroicons.com). Todos oferecem o ícone de 3 pontos em SVG, PNG e como componente para React, Vue e outros frameworks. Se você está desenvolvendo e quer usar o padrão oficial, o Material Design do Google especifica exatamente as medidas, espaçamentos e comportamentos de interação. O documento está disponível em material.io/design/components/menus.html. Recomendo ler a seção sobre menu de ações e menu de contexto antes de implementar, porque as regras de acessibilidade e animação são específicas e muitos desenvolvedores ignoram.
Para testes de usabilidade, o Figma tem templates prontos de menus de 3 pontos que você pode clonar e modificar. Basta procurar por "kebab menu" ou "more options menu" na biblioteca de templates do Figma Community. Isso economiza horas de design, especialmente se você precisa testar diferentes disposições de itens. Resumindo de forma direta: o menu de 3 pontos é um padrão de interface que agrupa ações secundárias num ícone discreto. Ele funciona bem quando usado com moderação e para ações realmente secundárias. Para funções importantes, prefira botões visíveis. Se o menu precisar de muitas opções, considere um drawer ou uma página dedicada em vez de empilhar itens num popover que corta na tela.
