const keepOpen = (event: Event) => event.preventDefault();

export function DropdownMenuCheckboxesDemo() {
const [statusBar, setStatusBar] = useState(true);
const [panel, setPanel] = useState(false);
const [position, setPosition] = useState("bottom");
return (
  <DropdownMenu>
    <DropdownMenuTrigger asChild>
      <Button variant="outline">View options</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent className="w-56">
      <DropdownMenuLabel>Appearance</DropdownMenuLabel>
      <DropdownMenuCheckboxItem
        checked={statusBar}
        onCheckedChange={setStatusBar}
        onSelect={keepOpen}
      >
        Status Bar
      </DropdownMenuCheckboxItem>
      <DropdownMenuCheckboxItem
        checked={panel}
        onCheckedChange={setPanel}
        onSelect={keepOpen}
      >
        Panel
      </DropdownMenuCheckboxItem>
      <DropdownMenuSeparator />
      <DropdownMenuLabel>Panel position</DropdownMenuLabel>
      <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
        <DropdownMenuRadioItem value="top" onSelect={keepOpen}>Top</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="bottom" onSelect={keepOpen}>Bottom</DropdownMenuRadioItem>
        <DropdownMenuRadioItem value="right" onSelect={keepOpen}>Right</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
);
}

Dropdown Menu

tsx

import { Button } from "@/components/ui/button";import {DropdownMenu,DropdownMenuContent,DropdownMenuGroup,DropdownMenuItem,DropdownMenuLabel,DropdownMenuSeparator,DropdownMenuShortcut,DropdownMenuSub,DropdownMenuSubContent,DropdownMenuSubTrigger,DropdownMenuTrigger,} from "@/components/ui/dropdown-menu";export function DropdownMenuDemo() {return (  <DropdownMenu>    <DropdownMenuTrigger asChild>      <Button variant="outline">Open</Button>    </DropdownMenuTrigger>    <DropdownMenuContent className="w-56" align="start">      <DropdownMenuLabel>My Account</DropdownMenuLabel>      <DropdownMenuGroup>        <DropdownMenuItem>          Profile          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>        </DropdownMenuItem>        <DropdownMenuItem>          Billing          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>        </DropdownMenuItem>        <DropdownMenuItem>          Settings          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>        </DropdownMenuItem>      </DropdownMenuGroup>      <DropdownMenuSeparator />      <DropdownMenuGroup>        <DropdownMenuItem>Team</DropdownMenuItem>        <DropdownMenuSub>          <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>          <DropdownMenuSubContent>            <DropdownMenuItem>Email</DropdownMenuItem>            <DropdownMenuItem>Message</DropdownMenuItem>            <DropdownMenuSeparator />            <DropdownMenuItem>More...</DropdownMenuItem>          </DropdownMenuSubContent>        </DropdownMenuSub>      </DropdownMenuGroup>      <DropdownMenuSeparator />      <DropdownMenuItem variant="destructive">        Log out        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>      </DropdownMenuItem>    </DropdownMenuContent>  </DropdownMenu>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/dropdown-menu.json"

Usage

tsx

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

tsx

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

API

DropdownMenu

Built on Radix Dropdown Menu Root; accepts all its props.

Prop	Type	Default	Description
`open`	`boolean`	none	Whether the menu is open. Use when controlled.
`defaultOpen`	`boolean`	`false`	Whether the menu starts open.
`onOpenChange`	`(open: boolean) => void`	none	Called when the menu opens or closes.
`modal`	`boolean`	`true`	Block interaction with the rest of the page while open.
`dir`	`"ltr" \| "rtl"`	none	Reading direction. Inherits from `DirectionProvider` when unset.

DropdownMenuTrigger

The button that toggles the menu. Built on Radix Dropdown Menu Trigger; accepts all its props.

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render the child element instead, merging props.

DropdownMenuContent

The animated menu, portaled and positioned against the trigger. Built on Radix Dropdown Menu Content; accepts all its props.

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Side of the trigger to open on.
`sideOffset`	`number`	`4`	Distance from the trigger in pixels.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment against the trigger.
`alignOffset`	`number`	`0`	Offset from the alignment edge in pixels.
`avoidCollisions`	`boolean`	`true`	Flip and shift to stay inside the viewport.
`collisionPadding`	`number \| Partial<Record<"top" \| "right" \| "bottom" \| "left", number>>`	`0`	Distance from the viewport edges for collision detection.
`loop`	`boolean`	`false`	Wrap keyboard focus at the ends.

DropdownMenuItem

Built on Radix Dropdown Menu Item; accepts all its props.

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	`destructive` colors the item for dangerous actions.
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.
`onSelect`	`(event: Event) => void`	none	Called when the item is chosen. Call `event.preventDefault()` to keep the menu open.
`disabled`	`boolean`	`false`	Make the item unselectable.
`textValue`	`string`	none	Text used for typeahead when the content isn't plain text.
`asChild`	`boolean`	`false`	Render the child element instead, merging props.

DropdownMenuCheckboxItem

An item with a check that pops in when it's toggled. Built on Radix Dropdown Menu CheckboxItem; accepts all its props.

Prop	Type	Default	Description
`checked`	`boolean \| "indeterminate"`	none	Checked state.
`onCheckedChange`	`(checked: boolean) => void`	none	Called when the item is toggled.
`disabled`	`boolean`	`false`	Make the item unselectable.

DropdownMenuRadioGroup

Built on Radix Dropdown Menu RadioGroup; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Value of the selected item.
`onValueChange`	`(value: string) => void`	none	Called when the selection changes.

DropdownMenuRadioItem

An item with a dot that pops in when it's selected. Built on Radix Dropdown Menu RadioItem; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Value this item selects. Required.
`disabled`	`boolean`	`false`	Make the item unselectable.

DropdownMenuLabel

Built on Radix Dropdown Menu Label; accepts all its props.

Prop	Type	Default	Description
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.

DropdownMenuSub

Built on Radix Dropdown Menu Sub; accepts all its props.

Prop	Type	Default	Description
`open`	`boolean`	none	Whether the sub-menu is open. Use when controlled.
`defaultOpen`	`boolean`	none	Whether the sub-menu starts open.
`onOpenChange`	`(open: boolean) => void`	none	Called when the sub-menu opens or closes.

DropdownMenuSubTrigger

The item that opens a sub-menu, with a chevron. Built on Radix Dropdown Menu SubTrigger; accepts all its props.

Prop	Type	Default	Description
`inset`	`boolean`	none	Add left padding to line up with items that have an indicator.
`disabled`	`boolean`	`false`	Make the trigger unselectable.

DropdownMenuSubContent

The animated sub-menu. It grows from its trigger item. Built on Radix Dropdown Menu SubContent; accepts all its props (sideOffset, alignOffset, avoidCollisions, loop).

DropdownMenuGroup, DropdownMenuPortal

Built on Radix Group and Portal; each accepts all its props. DropdownMenuContent already renders its own portal.

DropdownMenuSeparator, DropdownMenuShortcut

DropdownMenuSeparator is built on Radix Dropdown Menu Separator. DropdownMenuShortcut renders a native <span> for a keyboard hint. Both accept all their props.

Props match shadcn/ui Dropdown Menu.