NOCTA UI

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/cli add dropdown-menu

Import the component:

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

Examples

Default Dropdown Menu

With Separators

With Submenu

Disabled State

API Reference

DropdownMenu

Prop

Type

DropdownMenuTrigger

Prop

Type

DropdownMenuContent

Prop

Type

DropdownMenuItem

Prop

Type

DropdownMenuSeparator

Prop

Type

DropdownMenuSub

Prop

Type

DropdownMenuSubTrigger

Prop

Type

DropdownMenuSubContent

Prop

Type

Dialog

A modal dialog component for displaying content over the main interface with backdrop, keyboard navigation and accessibility features

Hovercard

Contextual hovercards for showing lightweight profiles or previews on pointer hover with Ariakit primitives and smart positioning

On this page

Installation
Examples
Default Dropdown Menu
With Separators
With Submenu
Disabled State
API Reference
DropdownMenu
DropdownMenuTrigger
DropdownMenuContent
DropdownMenuItem
DropdownMenuSeparator
DropdownMenuSub
DropdownMenuSubTrigger
DropdownMenuSubContent