Displays a menu to the user — such as a set of actions or functions — triggered by a button.
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Button } from "@/components/ui/button" export function DropdownMenuDemo() { return ( <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="outline">Open Menu</Button> </DropdownMenuTrigger> <DropdownMenuContent className="w-56"> <DropdownMenuLabel>My Account</DropdownMenuLabel> <DropdownMenuSeparator /> <DropdownMenuItem>Profile</DropdownMenuItem> <DropdownMenuItem>Billing</DropdownMenuItem> <DropdownMenuItem>Team</DropdownMenuItem> <DropdownMenuItem>Subscription</DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> ) }
Prop | Type | Default | Description |
---|---|---|---|
modal | boolean | true | Whether the dropdown menu should act like a modal. |
open | boolean | - | Whether the dropdown menu is open. |
onOpenChange | function | - | Function called when the open state of the dropdown menu changes. |