Dropdown Menu

Displays a menu to the user â€” such as a set of actions or functions â€” triggered by a button.

Installation

›pnpm dlx shadcn@latest add @evolphin/dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>My Account</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Billing</DropdownMenuItem>
    <DropdownMenuItem>Team</DropdownMenuItem>
    <DropdownMenuItem>Subscription</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Type Definitions

interface DropdownMenuProps {
  /** The controlled open state of the dropdown menu */
  open?: boolean;  
DropdownMenuProps.open?: boolean | undefined
The controlled open state of the dropdown menu
  /** The default open state when uncontrolled */
  ?: boolean;
  /** Event handler called when the open state changes */
  ?: (: boolean) => void;
  /** The modality of the dropdown menu */
  ?: boolean;
}

Examples

Default

Checkboxes

API Reference

DropdownMenu

Prop	Type	Default	Description
`open`	`boolean`	-	The controlled open state of the dropdown menu.
`defaultOpen`	`boolean`	-	The default open state when uncontrolled.
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes.
`modal`	`boolean`	`true`	The modality of the dropdown menu.

DropdownMenuTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Change the component to the HTML tag or custom component of the only child.

DropdownMenuContent

Prop	Type	Default	Description
`side`	`"top" \	"right" \	"bottom" \
`align`	`"start" \	"center" \	"end"`
`sideOffset`	`number`	`4`	The distance in pixels from the trigger.
`className`	`string`	-	Additional CSS classes

DropdownMenuItem

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the item is disabled.
`onSelect`	`(event: Event) => void`	-	Event handler called when the item is selected.
`inset`	`boolean`	`false`	Whether to indent the item.

DropdownMenuCheckboxItem

Prop	Type	Default	Description
`checked`	`boolean \	"indeterminate"`	-
`onCheckedChange`	`(checked: boolean) => void`	-	Event handler called when the checked state changes.

Search

On this page