Mais ações
Estabelece critérios para apresentar ações complementares, organizando-as por relevância, frequência de uso e risco da operação.
Boas Práticas
O agrupamento de ações deve priorizar escaneabilidade e tomada de decisão. Organize opções semelhantes juntas, destaque as mais relevantes e mantenha ações de risco em uma área claramente separada.
Contextos
A forma do trigger varia com o contexto, mas o princípio não muda: reduzir ruído visual sem esconder o que precisa ser acessível.
Ao abrir o menu, o trigger ganha um estado selecionado — fundo num tom mais escuro (nunca mais claro) — para sinalizar qual menu está ativo. A pessoa enxerga de onde o menu saiu.
O ícone do menu fica sempre visível ao final de cada linha. Clique abre o dropdown ancorado à linha.
Ações em massa no subheader da lista — botão com label, ícone ⋯ e chevron. Distinto do menu de mais ações ⋮ de cada linha: aqui o escopo é a lista inteira, não o item individual.
Em diretórios e listas enriquecidas (fornecedores, usuários), cada linha é um forehead individual. O menu de mais ações ⋮ fica ao final da linha — sempre visível, sem hover.
Documentos usam ghost CTAs no Subheader — sem ação primária em destaque. O 'Mais ações' fica ao lado dos CTAs específicos do documento. O conteúdo do documento tem largura fixa, não ocupa o fill da tela.
Estrutura do menu
Ações são organizadas em blocos por tipo e impacto. A frequência de uso define a posição dentro de cada bloco — as mais comuns no topo, as destrutivas sempre isoladas no final.
Quando ajuda, o menu pode trazer um bloco de assistente — por exemplo "Perguntar ao Genius" sobre aquele item — separado por divisor das ações de CRUD: o assistente vem até a ação, sem a pessoa sair da lista. Ver Transversais › Genius.
Ordem dos blocos no menu
divisor obrigatório entre blocos diferentes
divisor obrigatório entre blocos diferentes
divisor obrigatório antes de destrutivas
Regras de organização
- Frequência de uso define a posição dentro de cada bloco — mais usada no topo
- Blocos só existem quando há ≥ 2 tipos diferentes — sem mistura de tipos no mesmo bloco
- Divisor é obrigatório entre blocos de tipos diferentes
- Destrutivas sempre no último bloco, sempre com divisor acima, nunca misturadas
- Toggles ficam juntos — nunca intercalados com ações simples
- Label de grupo só quando há ambiguidade entre itens do mesmo bloco
Hierarquia
1 — Menu em linha de tabela i-lucide-ellipsis-vertical
Ícone
- i-lucide-ellipsis-vertical — vertical
Visibilidade
- Sempre visível ao final da linha (não apenas no hover)
- Largura do menu: mínimo 160px
Estrutura dos itens
- Ações frequentes não destrutivas — primeiras posições do menu
- Ações menos frequentes não destrutivas — posições intermediárias
- Divider visual separando ações não destrutivas das destrutivas
- Ações destrutivas (Excluir, Cancelar) — sempre ao final, após o divider
Heurísticas primárias
- Design minimalista — reduz ruído visual sem sacrificar o acesso às funcionalidades
- Reconhecimento em vez de memorização — cada item descreve exatamente o que será feito e sobre o quê
- Prevenção de erros — destrutivas sempre no último bloco, após divisor, nunca misturadas com as demais
- Visibilidade — o trigger do menu Mais ações é sempre acessível e reconhecível; nunca oculto por hover
Ações com ícone
- Cada item deve ter ícone contextual à esquerda
2 — Dropdown de toolbar (⋯)
Ícone
- i-lucide-ellipsis — ··· horizontal, ou botão "Mais" com chevron-down
Uso
- Aparece ao lado das ações principais da toolbar quando o espaço é insuficiente
- Os itens seguem a mesma hierarquia que no menu Mais ações
Heurísticas secundárias
- Consistência — mesmo tipo de trigger para o mesmo contexto em toda a plataforma
- Controle e liberdade — ESC e clique fora fecham o menu sem disparar nenhuma ação
- Eficiência de uso — ações mais frequentes no topo, destrutivas sempre no final
3 — Menu de forehead individual i-lucide-ellipsis-vertical
Posição
- Ícone ⋮ vertical ao final da linha — área de ações do forehead individual
- Nunca no canto superior do item — sempre inline ao final da row
Visibilidade
- Sempre visível ao final da linha — sem condicional de hover
Hierarquia
- Mesmo padrão de hierarquia: ações secundárias primeiro, destrutivas ao final
Labeling
O trigger sinaliza o menu; o rótulo pertence a cada item interno. Itens sem objeto no rótulo forçam o usuário a inferir o escopo da ação — use sempre Verbo + Objeto. O ícone i-lucide-ellipsis-vertical é reservado para o trigger — não o reutilize dentro do menu.
Cada item do menu descreve exatamente o que será feito e sobre o quê.
O objeto elimina ambiguidade — sem ele, o usuário não sabe o alvo ou o escopo da ação
O trigger usa rótulo apenas quando aparece em toolbar com espaço para texto.
"Mais ações" para toolbars de tarefa; "Mais opções" para telas de configuração e preferências
Fórmula: Variante + Contexto = Trigger
- Ordene por frequência — ações mais usadas no topo, destrutivas sempre ao final, separadas por divisor.
- Combine ícone + rótulo em cada item — o ícone acelera o reconhecimento, o rótulo elimina ambiguidade sobre o objeto.
- Use divisor para separar blocos de tipos diferentes — edição, toggles, exportação e destrutivas nunca se misturam.
- Não coloque ações primárias no menu — o que é mais importante deve estar sempre visível na interface.
- Não use rótulos com apenas verbo — "Exportar" sem especificar o objeto gera dúvida sobre o formato ou o alvo.
- Não misture ações destrutivas com as demais — o divisor antes de "Excluir" não é opcional.
Exemplos de uso
A hierarquia interna é o que diferencia um menu útil de um confuso — ações mais frequentes no topo, destrutivas sempre ao final. Os exemplos abaixo mostram o que muda quando essa ordem é respeitada ou ignorada.
Ações agrupadas por tipo: edição → toggles → separador → destrutiva
Editar e Duplicar no topo, Fixar logo abaixo, divisor antes de Excluir. O usuário encontra o que precisa sem ler tudo e sem risco de clique acidental.
"Excluir" como primeiro ou segundo item do menu
Ação destrutiva fora do último bloco aumenta o risco de clique acidental — especialmente em listas longas com ações repetidas.
Ação principal fora do menu, visível na toolbar
"Salvar" e "Publicar" sempre acessíveis na toolbar. O menu Mais ações complementa — nunca esconde o que é prioritário.
Ação primária escondida dentro do menu Mais ações
Colocar a ação mais importante no menu força o usuário a procurar o que deveria ser óbvio, gerando frustração e erro.
Cada item com ícone contextual e rótulo Verbo + Objeto
"Exportar PDF", "Arquivar contrato" — ícone reforça o reconhecimento e o rótulo elimina ambiguidade sobre o que será afetado.
Itens com apenas verbo genérico ou só ícone sem label
"Exportar" sem objeto ou só o ícone de download deixa o usuário em dúvida sobre o resultado e o formato da ação.
Feedback para Mais ações
O menu Mais ações é um container de acesso — ele mesmo não gera feedback. O feedback pertence à ação executada dentro dele: o menu fecha, a ação dispara, o Toast ou Alert confirma o resultado.
Use como comportamento padrão — o menu fecha ao selecionar, pressionar ESC ou clicar fora.
Sem delay — o fechamento é instantâneo
Use quando a ação é assíncrona — o spinner no item indica que algo está sendo processado.
Apenas quando a resposta demora mais de 300ms
Use para confirmar a ação executada — o Toast aparece após o menu fechar, nunca antes.
O Toast pertence à ação, não ao container "Mais ações"