Actions & overlays@neumorphism-ui/dropdown-menu

Dropdown Menu

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

@neumorphism-ui/dropdown-menu

Registry JSON

Preview

Installation

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

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

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

Import

import * as React from "react"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

Example

export function WorkspaceMenu() {
  const [showDepthGrid, setShowDepthGrid] = React.useState(true)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="soft" />}>
        Open menu
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Workspace</DropdownMenuLabel>
          <DropdownMenuSeparator />
          <DropdownMenuItem>
            Duplicate
            <DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuCheckboxItem
            checked={showDepthGrid}
            onCheckedChange={setShowDepthGrid}
          >
            Show depth grid
          </DropdownMenuCheckboxItem>
          <DropdownMenuItem variant="destructive">Delete</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

API Reference

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 \| "indeterminate"`	`—`	The controlled state of a checkbox item.
`DropdownMenuCheckboxItem`	`onCheckedChange`	`(checked) => void`	`—`	Called when a checkbox item state changes.