"use client"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>File</DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-60">
        <DropdownMenuItem>
          New Window <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          New Folder <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Open <DropdownMenuShortcut>⌘O</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Open With</DropdownMenuSubTrigger>
          <DropdownMenuSubContent className="w-44">
            <DropdownMenuItem>Preview</DropdownMenuItem>
            <DropdownMenuItem>TextEdit</DropdownMenuItem>
            <DropdownMenuSeparator />
            <DropdownMenuItem>Other…</DropdownMenuItem>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem disabled>
          Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          Get Info <DropdownMenuShortcut>⌘I</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          Move to Trash <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Installation

pnpm dlx shadcn@latest add @cupertinoui/dropdown-menu

The first install also adds the macOS theme. See Installation to set up the registry.

Usage

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

<DropdownMenu>
  <DropdownMenuTrigger>File</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>
      New Window <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Examples

Checkmarks

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownMenuCheckboxes() {
  const [toolbar, setToolbar] = React.useState(true)
  const [pathBar, setPathBar] = React.useState(false)
  const [statusBar, setStatusBar] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>View</DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-52">
        <DropdownMenuLabel>Show</DropdownMenuLabel>
        <DropdownMenuCheckboxItem checked={toolbar} onCheckedChange={setToolbar}>
          Toolbar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={pathBar} onCheckedChange={setPathBar}>
          Path Bar
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem checked={statusBar} onCheckedChange={setStatusBar}>
          Status Bar
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Radio items

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function DropdownMenuRadio() {
  const [sort, setSort] = React.useState("date")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="secondary" />}>Sort By</DropdownMenuTrigger>
      <DropdownMenuContent align="start" className="w-48">
        <DropdownMenuLabel>Sort By</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={sort} onValueChange={setSort}>
          <DropdownMenuRadioItem value="name">Name</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="kind">Kind</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="date">Date Modified</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="size">Size</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

API Reference

Every part forwards the props of the underlying Base UI Menu part. The props below are the ones CupertinoUI adds or changes.

DropdownMenuContent

Prop	Type	Description
`align`	`"start" \| "center" \| "end"` Default: `"center"`	Alignment against the trigger.
`sideOffset`	`number` Default: `4`	Distance from the trigger.
`className`	`string`	Extra classes, merged with the component's own.

DropdownMenuItem

Prop	Type	Description
`variant`	`"default" \| "destructive"` Default: `"default"`	Destructive items are red.
`inset`	`boolean`	Indent the item to line up with checkmark items.
`disabled`	`boolean`	Dims the item.

DropdownMenuCheckboxItem

Prop	Type	Description
`checked`	`boolean`	Shows a checkmark.
`onCheckedChange`	`(checked: boolean) => void`	Called when toggled.

DropdownMenuShortcut

Prop	Type	Description
`children`	`ReactNode`	The key equivalent, e.g. ⌘N.