Command Palette

Search for a command to run...

Dropdown Menu

shadcn/ui

Displays a menu to the user triggered by a button or other element.

import {	DropdownMenu,	DropdownMenuTrigger,	DropdownMenuContent,	DropdownMenuItem,	DropdownMenuLabel,	DropdownMenuSeparator,} from "@/registry/optics/dropdown-menu";import { Button } from "@/registry/optics/button";<DropdownMenu>	<DropdownMenuTrigger asChild>		<Button variant="raised">Open Menu</Button>	</DropdownMenuTrigger>	<DropdownMenuContent>		<DropdownMenuLabel>My Account</DropdownMenuLabel>		<DropdownMenuSeparator />		<DropdownMenuItem>Profile</DropdownMenuItem>		<DropdownMenuItem>Settings</DropdownMenuItem>		<DropdownMenuItem>Team</DropdownMenuItem>		<DropdownMenuSeparator />		<DropdownMenuItem>Logout</DropdownMenuItem>	</DropdownMenuContent></DropdownMenu>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/dropdown-menu.json

Props

<DropdownMenu />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
modal
boolean (default: true)

<DropdownMenuTrigger />
Name
Type
asChild
boolean
disabled
boolean
<DropdownMenuContent />
Name
Type
className
string
side
"top" | "right" | "bottom" | "left"
sideOffset
number (default: 4)
align
"start" | "center" | "end"
alignOffset
number
onEscapeKeyDown
(event: KeyboardEvent) => void
onPointerDownOutside
(event: PointerEvent) => void
onInteractOutside
(event: Event) => void
<DropdownMenuItem />
Name
Type
className
string
inset
boolean
variant
"default" | "destructive" (default: "default")
disabled
boolean
onSelect
(event: Event) => void
<DropdownMenuCheckboxItem />
Name
Type
className
string
checked
boolean
defaultChecked
boolean
onCheckedChange
(checked: boolean) => void
disabled
boolean
<DropdownMenuRadioGroup />
Name
Type
value
string
defaultValue
string
onValueChange
(value: string) => void
<DropdownMenuRadioItem />
Name
Type
className
string
value
string (required)
disabled
boolean
<DropdownMenuLabel />
Name
Type
className
string
inset
boolean
<DropdownMenuSeparator />
Name
Type
className
string
<DropdownMenuGroup />
Name
Type
className
string
<DropdownMenuSub />
Name
Type
open
boolean
defaultOpen
boolean
onOpenChange
(open: boolean) => void
<DropdownMenuSubTrigger />
Name
Type
className
string
inset
boolean
disabled
boolean
<DropdownMenuSubContent />
Name
Type
className
string
side
"top" | "right" | "bottom" | "left"
sideOffset
number (default: 2)
align
"start" | "center" | "end" (default: "start")
alignOffset
number (default: -4)
<DropdownMenuShortcut />
Name
Type
className
string
DrawerEmpty State