O que são os três pontos em interfaces
Os três pontos — aquele ícone de três pontinhos verticais ou horizontais que aparece em botões e barras de navegação — são um componente de UI usado para agrupar ações secundárias que não cabem no fluxo principal da tela. Em vez de espalhar todos os comandos possíveis pelo layout, o desenvolvedor ou designer empacota as opções menos frequentes dentro desse menu suspenso. O nome técnico é menu "mais opções", e na comunidade de design ele também carrega o apelido de kebab menu quando os pontinhos estão em vertical. A função prática é simples: economia de espaço visual e hierarquia de informações. Você coloca o que as pessoas fazem com mais frequência na cara, e o resto vai para trás dos três pontos. Isso funciona bem até o dia em que alguém não encontra o botão que precisa e reclama que tá tudo escondido.
para que serve os tres pontos na prática
Na prática, os três pontos servem para revelar um conjunto de ações contextuais. Clicar neles abre um pop-up ou drawer com opções como editar, deletar, compartilhar, exportar, ver detalhes, etc. O conteúdo varia conforme o contexto — num app de mensagens, os três pontos num chat podem mostrar "arquivar conversa"; numa lista de arquivos, podem mostrar "compartilhar", "renomear" ou "mover". Aqui vai um caso real que me aconteceu há pouco tempo: estava configurando um dashboard interno de monitoramento e precisava que o menu de três pontos em cada card exibisse opções diferentes dependendo do tipo de dado. O framework que estávamos usando renderizava o mesmo dropdown genérico para todos os cards. A solução foi criar um mapeador baseado no tipo de resource e passar uma prop de configuração customizada pra cada instância. Não era algo óbvio pela documentação, porque o componente tratava as ações como um array estático, mas dava pra sobrescrever via context API do React. Levou cerca de duas horas pra ajustar, mas depois funcionou sem dores de cabeça.
Um detalhe que quem começa costuma ignorar: os três pontos não são acessíveis por padrão se você só colocar um ícone de SVG num botão. O screen reader vai ler "botão" ou "três pontos", mas nunca vai dizer o quê aquele menu contém. A correção é simples — adicionar um aria-label descritivo, tipo "Mais ações" ou "Opções do item X". Sem isso, usuários com deficiência visual ficam totalmente perdidos. Também tem o problema da consistência. Às vezes você vê três pontos horizontais em um app e verticais em outro, e isso confunde o usuário porque ele associa orientação a comportamento. O padrão do Material Design do Google recomenda o vertical para listas e menus de ação, enquanto o horizontal aparece mais em toolbars de desktop. Se você misturar os dois no mesmo produto sem motivo, as pessoas vão tropeçar.
👉 Clique no botão abaixo para saber mais sobre o assunto!
Como implementar corretamente
Se você está construindo isso do zero, comece definindo quais ações vão ficar dentro do menu. Uma regra prática que eu uso: se o usuário precisa clicar no botão mais de uma vez por sessão, talvez ele não deva estar escondido. Se a ação é pontual — como "Excluir" ou "Exportar PDF" — aí faz sentido ir pro menu. No código, a estrutura básica é um botão trigger com um container dropdown. O importante é garantir que o dropdown feche quando o usuário clicar fora, pressione Escape, ou navegue para outro elemento. Sem isso, você cria um buraco negro de interações pendentes que é frustrante de fechar.
Uma armadilha comum é o posicionamento. Quando o menu fica perto da borda da tela, ele acaba sendo cortado. A solução técnica é calcular a posição com base no viewport e usar flip ou shift do Popper.js (ou biblioteca similar) para reposicionar automaticamente. Sem isso, você gasta tarde debugging posição de dropdown em telas pequenas. Para quem quer uma referência rápida de implementação, o Material UI (docs do MUI) e o Radix UI (docs do Radix) têm componentes prontos que já tratam acessibilidade, focus trap e posicionamento. Usem se não quiserem reconstruir a roda.
Quando os três pontos falham
Ser transparente sobre isso: os três pontos têm limitações sérias. O principal é a descobribilidade. Estudos de usabilidade mostram que entre 30% e 50% dos usuários não reconhecem o ícone de três pontos como "mais opções" na primeira interação. Eles clicam, não acontecem nada visível, e desistem. Isso é especialmente ruim em apps voltados para públicos menos familiarizados com interface digital. Outro ponto fraco é a quantidade de ações. Se o menu de três pontos tiver mais de sete itens, vira uma lista interminável que ninguém lê. O limite ragionevole é entre 3 e 5 opções. Mais do que isso, considere dividir em submenus ou levar as ações para a barra principal.
Em telas muito pequenas (celulares antigos, 360px de largura), o menu dropdown pode cobrir o conteúdo inteiro da tela e impedir o usuário de ver o contexto do que está selecionando. Nesse caso, um drawer lateral ou uma Sheet do bottom é mais adequado do que um dropdown flutuante. Resumindo sem resuminhar: os três pontos são uma ferramenta útil para organizar opções secundárias, desde que usados com critérios claros de acessibilidade, limite de itens e contexto apropriado. Se o seu produto depende fortemente de descoberta de funcionalidades, talvez um menu de navegação explícito seja mais honesto do que esconder tudo atrás de pontinhos.
