Pular para o conteúdo
Faculdade PhorteDesign System

Dropdown

Em andamento

Menu de ações que abre de um botão — o padrão Menu Button do WAI-ARIA: um ponto de Tab para o menu inteiro, setas para andar, digitação para buscar e Esc para fechar.

Função
Formulário e ação
Também chamado de
menu, menu de ações, mais opções, kebab, menu suspenso
Mora em
app/components/molecules/Dropdown.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. Aberto
  3. Com item destrutivo
  4. Com Item Inativo
  5. Posicionamento
  6. Controlado
  7. Com Ref
  8. Com grupos
  9. Só ícone

Quando usar

Para agrupar ações de um item ou de uma tela que não cabem como botões soltos — editar, duplicar, excluir.

Faça

  • Dê um triggerLabel que diga o que abre: "Ações do curso", não "Opções".
  • Ponha ícone no item destrutivo (tone="destructive") — a cor sozinha não basta.
  • Com mais de seis ações, organize em grupos com subtítulo: { id, group: "Compartilhar", items } (E63). O separador { id, separator: true } só divide para quem vê.
  • Use placement quando o botão estiver no fim da linha (bottom-end); perto do pé da janela ele inverte sozinho (E63).
  • Para o "⋯" de cartão e de linha, triggerIcon com um triggerLabel que diga de quê: "Mais ações do curso" (E63).

Evite

  • Usar como seletor de valor: o item não fica marcado — não há menuitemradio.
  • Esconder ação principal dentro do menu.
  • Item desabilitado sem motivo à vista: ele continua focável e anunciado, mas não diz por que não funciona.

Quando não usar. Para escolher um valor num formulário, use o Select. Para navegar entre páginas, links (a Navbar tem os seus). Para duas ou três ações, botões à vista (Button).

Nota de uso

E63: acionador só-ícone (triggerIcon, com o triggerLabel como nome), grupos com subtítulo (role="group" nomeado) e inversão quando não cabe na janela. Declara role="menu" com foco roving: um único ponto de tabulação no menu inteiro, setas circulando, Home/End, e digitação buscando por prefixo (com acento — a alcança "Ações"). Isso não contradiz a decisão da Navbar: lá o papel foi removido porque prometia um item focável por vez e entregava doze links tabuláveis; aqui o contrato vem inteiro. Para escolher um valor, use o Select — este é menu de ações. Não implementado, e dito em voz alta: item de marcação (menuitemradio), que filtro rápido e ordenação pediriam. A lista entra esmaecendo e descendo 4px em 150ms, só com movimento liberado.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Botão — Um Button (`triggerVariant`) com o rótulo e uma seta — ou, com `triggerIcon`, só o ícone em 44×44, com o `triggerLabel` como `aria-label`; anuncia `aria-haspopup="menu"` e `aria-expanded`.
  2. Painel — `role="menu"`, a partir de 14rem de largura, posicionado pelo `placement`.
  3. Item — `role="menuitem"`, 44px de altura, com ícone opcional.
  4. Separador — `role="separator"` entre grupos.
  5. Grupo — `role="group"` nomeado pelo subtítulo (12px, negrito, caixa alta, `--muted-foreground`), com os itens dentro (E63).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
FechadoSó o botão; aria-expanded="false".
AbertoPainel à mostra, aria-expanded="true", e o foco no item ativo. Entra esmaecendo e descendo 4px em 150ms, só com movimento liberado.
Item em focoAnel de foco por dentro do item (ring-inset).
Item destrutivotone="destructive": texto vermelho de interface.
Item inativodisabled: 50% de opacidade e aria-disabled, mas continua focável.
Desabilitadodisabled no Dropdown desabilita o botão.
InvertidoSem espaço embaixo e com espaço em cima, o painel abre para cima (data-posicao); vale também ao contrário (E63).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Item escolhidoChama o onSelect do item, fecha o menu e devolve o foco ao botão.
Clique foraFecha o menu — pelo mousedown fora e pelo foco que sai; testado na ficha (E142).
Abre perto do pé da janelaMede o painel antes da pintura e, se ele sairia da tela, abre do outro lado — conferido no teste da ficha: pedido bottom-start, efetivo top-start, dentro da janela. Um ancestral com overflow: hidden ainda recorta: a medida é contra a janela, e o painel não usa portal.
Setas com gruposAndam pelos itens de todos os grupos, na ordem, como se fosse uma lista só — conferido no teste da ficha.
Tab com o menu abertoFecha o menu e segue para o próximo elemento, sem prender o foco.
Modo controladoCom open, quem manda é o consumidor; onOpenChange dispara em todo caminho de fechamento, nos dois modos.

Relacionados