Vox Mente
Navegação

Componentes

Dropdown Menu

beta

Lista de ações a partir de um gatilho. Ações, não navegação — para navegar existe link.

Ainda não é estável porque Pendência editorial: oQueE, quandoUsar, quandoNaoUsar; Rota não varrida pelo sensor. Ausência de medição não é aprovação. O contrato de maturidade explica o que cada requisito exige.

@voxmente/ui/components/ui/dropdown-menu

Playground
<DropdownMenu>
  <DropdownMenuTrigger render={<Button variant="outline" />}>Ações da turma</DropdownMenuTrigger>
  <DropdownMenuContent>
  <DropdownMenuItem>Editar turma</DropdownMenuItem>
  <DropdownMenuItem>Arquivar</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem variant="destructive">Excluir turma</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Anatomia

As partes deste componente e como se aninham. A árvore vem das demonstrações desta página, então descreve um exemplo que renderiza.
DropdownMenu
  └─ DropdownMenuTrigger
  └─ DropdownMenuContent
    └─ DropdownMenuGroup
      └─ DropdownMenuLabel
      └─ DropdownMenuItem
    └─ DropdownMenuSeparator
    └─ DropdownMenuItem

Exportadas, mas sem demonstração nesta página: DropdownMenuPortal.

Uso

Lista de ações sobre um item, aberta por um gatilho. Não é navegação — é comando.

Grupo, rótulo e separador

`DropdownMenuLabel` identifica um grupo de itens e precisa estar dentro de um `DropdownMenuGroup` — fora dele o Base UI lança erro, porque o rótulo pertence ao grupo, não ao menu. `DropdownMenuSeparator` divide blocos de ação diferentes: não decora, distingue.

Atalho de teclado

`DropdownMenuShortcut` só exibe o texto do atalho — ele não registra a tecla. O bind fica na aplicação.

Item de marcação

`DropdownMenuCheckboxItem` liga ou desliga uma preferência sem fechar o fluxo de decisão em um dialog à parte.

Item de escolha única

`DropdownMenuRadioGroup` com `DropdownMenuRadioItem` — uma opção por vez, como ordenar uma lista de alunos.

Referência da API

Extraída do TypeScript de @voxmente/ui a cada build. Se divergir do código, o código mudou.

DropdownMenuCheckboxItem

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

DropdownMenuItem

PropTipoPadrão
insetboolean—
variant"default" | "destructive""default"

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

DropdownMenuLabel

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

DropdownMenuRadioItem

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

DropdownMenuSubTrigger

PropTipoPadrão
insetboolean—

Também aceita as props de Base UI e React, incluindo className e os atributos de DOM.

DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuTrigger não têm props próprias — aceitam apenas as props herdadas, incluindo className e os atributos de DOM.

Pendência editorial: o que é, quando usar, quando não usar, acessibilidade, componentes relacionados, exemplo em contexto de produto. A lacuna aparece aqui em vez de ser preenchida com orientação inventada.

Origem do dado
  • Anatomia: exemplo desta página
  • Demonstrações e playground: componente real de @voxmente/ui
  • Referência da API: TypeScript do pacote
  • Cor, espaçamento e raio das demonstrações: tokens de theme.css