Dropdown Menu
NavigationDisplays a menu to the user — such as a set of actions or functions — triggered by a button.
Import
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";Usage
Default
A simple dropdown menu with labels, items, and separators.
API Reference
defaultOpen—booleanThe open state of the dropdown menu when it is initially rendered
open—booleanThe controlled open state of the dropdown menu
onOpenChange—(open: boolean) => voidEvent handler called when the open state of the dropdown menu changes
modaltruebooleanWhether the dropdown menu should be modal
| Prop | Type | Default | Description |
|---|---|---|---|
defaultOpen | boolean | — | The open state of the dropdown menu when it is initially rendered |
open | boolean | — | The controlled open state of the dropdown menu |
onOpenChange | (open: boolean) => void | — | Event handler called when the open state of the dropdown menu changes |
modal | boolean | true | Whether the dropdown menu should be modal |