Dropdown Menu

Overlay

Menu flutuante acionado por clique, com itens, checkbox, radio, rótulos, separadores e sub-menus.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { DropdownMenu } from "@trdr/ui/dropdown-menu"

Uso

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel } from "@trdr/ui/dropdown-menu"

export function Exemplo() {
  return <DropdownMenu />
}

Variantes

GrupoValoresPadrão
variant
defaultdestructive
default
inset
truefalse
false

Props

DropdownMenuPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Root>
DropdownMenuTriggerPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
DropdownMenuContentPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
DropdownMenuGroupPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>
DropdownMenuItemPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>, VariantProps<typeof dropdownMenuItemVariants>
DropdownMenuCheckboxItemPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
DropdownMenuRadioGroupPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>
DropdownMenuRadioItemPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
DropdownMenuLabelPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
PropTipoDescrição
inset?boolean
DropdownMenuSeparatorPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
DropdownMenuShortcutPropsestende React.HTMLAttributes<HTMLSpanElement>
DropdownMenuSubPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>
DropdownMenuSubTriggerPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>
PropTipoDescrição
inset?boolean
DropdownMenuSubContentPropsestende React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>

Quando usar

Use o dropdown-menu para uma lista de acoes ou opcoes relacionadas a um gatilho especifico: o menu "..." de um card, as opcoes de conta no header, um seletor com varias opcoes marcaveis (checkbox item) ou mutuamente exclusivas (radio item). O visual reproduz o antigo "Floating Menu" do Hub, incluindo o item de sub-menu que antes vivia em SubMenu.tsx, agora unificado num componente so.

Quando nao usar

Nao use dropdown-menu para navegacao principal entre secoes do produto (isso e navigation-menu ou uma barra fixa), nem para uma unica escolha excludente entre poucas opcoes visiveis o tempo todo (isso e select ou toggle-group). Para o menu que abre com o botao direito do mouse, use o context-menu: mesmo visual, gatilho diferente. Para uma lista de comandos com busca por texto, o componente certo e o command (em construcao em fase posterior), nao este.

Anatomia

  • DropdownMenu (Root): contexto de aberto/fechado. Nao renderiza elemento.
  • DropdownMenuTrigger: o que abre o menu. Normalmente asChild em cima de um Button.
  • DropdownMenuContent (data-slot="dropdown-menu-content"): a superficie flutuante. Ja se embrulha no Portal sozinha.
  • DropdownMenuItem (data-slot="dropdown-menu-item"): acao simples. Aceita variant (default | destructive) e inset (recua o texto quando um item vizinho tem icone e este nao).
  • DropdownMenuCheckboxItem e DropdownMenuRadioGroup com DropdownMenuRadioItem: selecao independente (varias marcadas) ou excludente (uma marcada) dentro do proprio menu, sem fechar a cada clique.
  • DropdownMenuLabel: titulo de sessao, nao interativo.
  • DropdownMenuSeparator: linha divisoria entre grupos de itens.
  • DropdownMenuShortcut: texto auxiliar alinhado a direita do item (atalho de teclado). Nao e um primitivo do Radix, e so um span estilizado.
  • DropdownMenuGroup: agrupa itens visualmente e para leitores de tela, sem alterar o visual do DropdownMenuContent.
  • DropdownMenuSub + DropdownMenuSubTrigger + DropdownMenuSubContent: sub-menu aninhado. O DropdownMenuSubContent precisa ser embrulhado manualmente num DropdownMenuPortal pelo consumidor (o Radix exige isso para sub-menus; o DropdownMenuContent de topo ja faz isso sozinho). Veja a demo para o padrao exato.

Acessibilidade

O Radix implementa a navegacao completa por teclado: Espaco/Enter abre o menu e foca o primeiro item, Seta para cima/baixo percorre os itens, Seta para direita abre um sub-menu focado, Seta para esquerda ou Escape fecha e volta o foco ao item pai ou ao trigger. Um item com disabled fica fora da navegacao por seta e nao dispara onSelect nem por teclado nem por clique. Digite uma letra com o menu aberto para pular direto para o proximo item cujo texto comeca com ela (busca por tipo, nativa do Radix).

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="dropdown-menu-checkbox-item"][data-slot="dropdown-menu-content"][data-slot="dropdown-menu-group"][data-slot="dropdown-menu-item"][data-slot="dropdown-menu-label"][data-slot="dropdown-menu-radio-group"][data-slot="dropdown-menu-radio-item"][data-slot="dropdown-menu-separator"][data-slot="dropdown-menu-shortcut"][data-slot="dropdown-menu-sub-content"][data-slot="dropdown-menu-sub-trigger"][data-slot="dropdown-menu-trigger"]
16 tokens usados
bg-border-subtlebg-popoverbg-surface-errorbg-surface-secondaryborder-borderfill-currentoutline-noneshadow-mdtext-auxtext-b3text-b4text-content-brandtext-content-errortext-content-secondarytext-content-tertiarytext-popover-foreground