Dropdown Menu

Use DropdownMenu to collect commands behind a button, including optional checked settings and destructive actions.

Preview

Workspace actions

Explore page commands, a controlled depth-guide checkbox, a theme submenu with radio choices, and a destructive workspace item.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/dropdown-menu

Install the shared base once, then add components and their dependencies with the CLI.

Workspace actions

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/dropdown-menu

Registry JSON

Usage

Pair DropdownMenuTrigger with DropdownMenuContent. Group related items and connect checkbox or radio items to application state when they represent a preference.

"use client";

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

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <DropdownMenu>
        <DropdownMenuTrigger render={<Button />}>View options</DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuCheckboxItem checked={visible} onCheckedChange={setVisible}>Show details</DropdownMenuCheckboxItem>
        </DropdownMenuContent>
      </DropdownMenu>
      {visible && <p>Project details are visible.</p>}
    </div>
  );
}

API Reference

A complete composable API built on Base UI Menu. Combines regular items, checkboxes, radio groups, labels, separators, shortcuts, and nested submenus on one surface.

Component	Prop	Type	Default	Description
`DropdownMenu`	`open / defaultOpen`	`boolean`	`false`	The controlled open state or initial uncontrolled open state.
`DropdownMenu`	`onOpenChange`	`(open: boolean) => void`	`—`	Called when the menu open state changes.
`DropdownMenuTrigger`	`render`	`ReactElement \| (props, state) => ReactElement`	`—`	Composes trigger behavior onto a button or link.
`DropdownMenuContent`	`side / align`	`"top" \| "right" \| "bottom" \| "left" / "start" \| "center" \| "end"`	`"bottom" / "start"`	Positions the popup relative to the trigger.
`DropdownMenuContent`	`sideOffset`	`number`	`8`	The distance between the trigger and popup.
`DropdownMenuItem`	`variant`	`"default" \| "destructive"`	`"default"`	Selects the regular or destructive action style.
`DropdownMenuItem / Label`	`inset`	`boolean`	`false`	Aligns text with rows that include an indicator.
`DropdownMenuCheckboxItem`	`checked`	`boolean`	`—`	The controlled state of a checkbox item.
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	Called when a checkbox item state changes.

Preview

Workspace actions

Installation

Usage

API Reference

Accessibility