Carregando…Carregando…Carregando…Carregando…Triggered menu (click/right-click/hover) with grouped items, icons, shortcuts and separators.
$ npx kikitocn add dropdown-menu@/lib/utils@/lib/motionmotionimport { DropdownMenu } from "@/components/ui/cn/dropdown-menu/DropdownMenu";
export function DropdownMenuExample() {
return (
<DropdownMenu trigger="click" placement="bottom-start">
<button type="button">Dropdown Menu</button>
</DropdownMenu>
);
}| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
trigger | 'click' | 'contextmenu' | 'hover' | 'click' | Como o menu abre: click (dropdown clássico), contextmenu (clique-direito, absorve ContextMenu) ou hover (absorve FloatingMenu) |
openOnHover | boolean | false | Só com trigger 'hover': true abre ao passar o mouse; false alterna no clique |
items* | MenuEntry[] | — | Itens do menu (grupos, separadores, ações) |
header | React.ReactNode | undefined | Conteúdo livre renderizado no topo do menu (só trigger="click"), antes de todos os itens |
placement | 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left' | 'right' | 'bottom-start' | Posição do menu |
children* | React.ReactElement | — | Elemento que dispara o menu |
Default (bottom-start)
bottom-start · bottom-end · top-start · top-end
prop header — conteudo livre antes dos grupos
Right-click the area below
Click trigger → hover menu
Clique — skin translúcido estilo macOS