Dropdown Menu

Mostra ao usuário um menu, como um conjunto de ações ou funções, aberto por um botão.

Exemplos

Padrão

Tamanhos

O size do DropdownMenuContent vale para o menu inteiro: itens, checkboxes, radios, rótulos de grupo, separadores, atalhos e submenus seguem o mesmo tamanho. O md é o padrão. No sm, o item tem 32px de altura, texto de 12px e ícone de 16px; no md, 40px, 14px e 20px; no lg, 48px, 16px e 24px. O atalho (DropdownMenuShortcut) e a seta do subtrigger ficam um passo abaixo do texto do item: 10px no sm, 12px no md e 14px no lg.

Checkboxes

Grupo de radio

API

DropdownMenu

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
...props	Todas as props de Radix DropdownMenu.Root	-	-	Todas as propriedades nativas do componente DropdownMenu Root do Radix UI.

DropdownMenuTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
asChild	boolean	true, false	false	Quando true, o componente não renderiza um elemento DOM próprio e usa o elemento filho como trigger.
...props	Todas as props de Radix DropdownMenu.Trigger	-	-	Todas as propriedades nativas do componente DropdownMenu Trigger do Radix UI.

DropdownMenuContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao conteúdo do dropdown.
sideOffset	number	-	4	Distância em pixels entre o trigger e o conteúdo.
align	"start" | "center" | "end"	"start", "center", "end"	"center"	Alinhamento do conteúdo em relação ao trigger.
size	"sm" | "md" | "lg"	"sm", "md", "lg"	"md"	Tamanho do menu inteiro. Itens, checkboxes, radios, rótulos de grupo, separadores, atalhos e submenus leem esse valor. Fica exposto em data-size no conteúdo.
side	"top" | "right" | "bottom" | "left"	"top", "right", "bottom", "left"	"bottom"	Lado preferido do trigger onde o conteúdo aparece. Com a janela abaixo de 768px de largura, é sempre forçado para "bottom" (veja o useIsMobile). O conteúdo é renderizado dentro de um portal automaticamente.
...props	Todas as props de Radix DropdownMenu.Content	-	-	Todas as propriedades nativas do componente DropdownMenu Content do Radix UI.

DropdownMenuItem

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao item do menu.
inset	boolean	true, false	false	Quando true, adiciona um recuo extra ao item.
variant	"default" | "destructive"	"default", "destructive"	"default"	Variante visual do item. Use "destructive" para ações de remoção ou exclusão: texto e ícone em vermelho, que escurece no destaque. Desabilitado, o item destrutivo fica cinza como os outros itens desabilitados.
disabled	boolean	true, false	false	Quando true, desabilita o item do menu.
...props	Todas as props de Radix DropdownMenu.Item	-	-	Todas as propriedades nativas do componente DropdownMenu Item do Radix UI.

DropdownMenuCheckboxItem

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao item de checkbox.
checked	boolean | "indeterminate"	true, false, "indeterminate"	false	Estado do checkbox do item.
onCheckedChange	(checked: boolean) => void	-	-	Função chamada quando o estado do checkbox muda.
children	React.ReactNode	-	-	Conteúdo do item de checkbox.
...props	Todas as props de Radix DropdownMenu.CheckboxItem	-	-	Todas as propriedades nativas do componente DropdownMenu CheckboxItem do Radix UI.

DropdownMenuRadioGroup

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
value	string	-	-	Valor do item de radio selecionado.
onValueChange	(value: string) => void	-	-	Função chamada quando a seleção do grupo de radio muda.
...props	Todas as props de Radix DropdownMenu.RadioGroup	-	-	Todas as propriedades nativas do componente DropdownMenu RadioGroup do Radix UI.

DropdownMenuRadioItem

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao item de radio.
value	string	-	-	Valor único do item de radio.
children	React.ReactNode	-	-	Conteúdo do item de radio.
...props	Todas as props de Radix DropdownMenu.RadioItem	-	-	Todas as propriedades nativas do componente DropdownMenu RadioItem do Radix UI.

DropdownMenuLabel

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao label.
inset	boolean	true, false	false	Quando true, adiciona um recuo extra ao label.
...props	Todas as props de Radix DropdownMenu.Label	-	-	Todas as propriedades nativas do componente DropdownMenu Label do Radix UI.

DropdownMenuSeparator

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao separador.
...props	Todas as props de Radix DropdownMenu.Separator	-	-	Todas as propriedades nativas do componente DropdownMenu Separator do Radix UI.

DropdownMenuShortcut

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao atalho.
children	React.ReactNode	-	-	Texto do atalho de teclado (ex.: "⌘K").
...props	Todas as props de span HTML	-	-	Todas as propriedades nativas do elemento span HTML.

DropdownMenuGroup

Agrupa itens relacionados. Aceita todas as props de Radix DropdownMenu.Group e não adiciona estilo extra.

DropdownMenuSub

Raiz de um submenu aninhado: envolva com ele um DropdownMenuSubTrigger e um DropdownMenuSubContent.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
open	boolean	true, false	-	Estado aberto do submenu (controlado).
defaultOpen	boolean	true, false	false	Estado aberto inicial quando não controlado.
onOpenChange	(open: boolean) => void	-	-	Função chamada quando o estado aberto do submenu muda.

DropdownMenuPortal

Renderiza os filhos em document.body via portal (Radix DropdownMenu.Portal). O DropdownMenuContent já é renderizado dentro de um portal, então você só precisa dele para levar um DropdownMenuSubContent para o portal.

DropdownMenuSubTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao trigger do submenu.
inset	boolean	true, false	false	Quando true, adiciona um recuo extra ao trigger.
children	React.ReactNode	-	-	Conteúdo do trigger do submenu.
...props	Todas as props de Radix DropdownMenu.SubTrigger	-	-	Todas as propriedades nativas do componente DropdownMenu SubTrigger do Radix UI.

DropdownMenuSubContent

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao conteúdo do submenu.
size	"sm" | "md" | "lg"	"sm", "md", "lg"	-	Tamanho do submenu. Sem a prop, herda o size do DropdownMenuContent.
...props	Todas as props de Radix DropdownMenu.SubContent	-	-	Todas as propriedades nativas do componente DropdownMenu SubContent do Radix UI.