Dropdown Menu

A dropdown menu component triggered with a standard click, featuring separators, submenus, and disabled states

Installation

Install the Dropdown Menu component using the nocta-ui CLI:

npx nocta-ui add dropdown-menu

Import the component:

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

Examples

With Separators

Use DropdownMenuSeparator to group related menu items.

With Submenu

Create nested menus using DropdownMenuSub, DropdownMenuSubTrigger, and DropdownMenuSubContent.

Disabled State

Both the entire dropdown menu and individual items can be disabled.

API Reference

DropdownMenu

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The trigger and content components
`className`	`string`	—	Additional CSS classes

DropdownMenuTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Content that toggles the menu on click
`disabled`	`boolean`	`false`	Disable the dropdown trigger
`className`	`string`	—	Additional CSS classes

DropdownMenuContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Menu items and separators
`className`	`string`	—	Additional CSS classes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Content padding and min-width

DropdownMenuItem

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Item content
`disabled`	`boolean`	`false`	Disable the item
`inset`	`boolean`	`false`	Indent the item content
`destructive`	`boolean`	`false`	Apply destructive styling
`className`	`string`	—	Additional CSS classes
`onClick`	`() => void`	—	Click handler

DropdownMenuSeparator

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes

DropdownMenuSub

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu trigger and content

DropdownMenuSubTrigger

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu trigger content
`disabled`	`boolean`	`false`	Disable the submenu trigger
`inset`	`boolean`	`false`	Indent the trigger content
`destructive`	`boolean`	`false`	Destructive styling (not typical)
`className`	`string`	—	Additional CSS classes

DropdownMenuSubContent

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Submenu items and separators
`className`	`string`	—	Additional CSS classes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Content padding and min-width

On this page