On this page

DropdownMenu

A menu that appears below a trigger with selectable items.

import { DropdownMenu } from "@ninna-ui/overlays";

pnpm add @ninna-ui/overlays@latest

Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the DropdownMenu component in your application.

import { DropdownMenu } from "@ninna-ui/overlays";
import { Button , Code } from "@ninna-ui/primitives";

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenu.Trigger asChild>
        <Button variant="outline">Open Menu</Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item>Profile</DropdownMenu.Item>
        <DropdownMenu.Item>Settings</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>Sign out</DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu>
  );
}

Basic

A simple dropdown menu with items and a separator.

Live preview/ Default

Groups & Labels

Organize menu items with groups, labels, and separators.

Live preview/ Default

Checkbox Items

Menu items that can be toggled on and off.

Live preview/ Default

Radio Items

Mutually exclusive selection within a radio group.

Live preview/ Default

Sub Menu

Nested menus with sub-triggers for complex hierarchies.

Live preview/ Default

Disabled Items

Items can be disabled to prevent interaction.

Live preview/ Default

API Reference

Complete list of props for the DropdownMenu component and its sub-components.

DropdownMenu (Root)

Prop	Type	Default	Description
`children`*	`ReactNode`	`—`	DropdownMenu content (Trigger, Content, etc.)
`open`	`boolean`	`—`	Controlled open state
`defaultOpen`	`boolean`	`false`	Default open state (uncontrolled)
`onOpenChange`	`(open: boolean) => void`	`—`	Callback when open state changes
`modal`	`boolean`	`true`	Whether the dropdown is modal
`dir`	`'ltr' \| 'rtl'`	`'ltr'`	Reading direction

DropdownMenu.Content

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Which side to place the menu
`sideOffset`	`number`	`4`	Distance from trigger in pixels
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Alignment along the side
`loop`	`boolean`	`true`	Whether to loop keyboard navigation
`avoidCollisions`	`boolean`	`true`	Whether to avoid collisions with viewport boundary
`className`	`string`	`—`	Additional CSS classes

DropdownMenu.Trigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Render as child element instead of wrapping button

DropdownMenu.Item

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Whether the item is disabled
`destructive`	`boolean`	`false`	Whether the item uses danger styling
`onSelect`	`(event: Event) => void`	`—`	Callback when the item is selected
`textValue`	`string`	`—`	Text value for typeahead search

DropdownMenu.CheckboxItem

Prop	Type	Default	Description
`checked`	`boolean \| 'indeterminate'`	`—`	Whether the item is checked
`onCheckedChange`	`(checked: boolean) => void`	`—`	Callback when checked state changes
`disabled`	`boolean`	`false`	Whether the item is disabled
`onSelect`	`(event: Event) => void`	`—`	Callback when the item is selected
`textValue`	`string`	`—`	Text value for typeahead search

DropdownMenu.RadioGroup

Prop	Type	Default	Description
`value`	`string`	`—`	Current selected value
`onValueChange`	`(value: string) => void`	`—`	Callback when value changes

DropdownMenu.RadioItem

Prop	Type	Default	Description
`value`*	`string`	`—`	Value of the radio item
`disabled`	`boolean`	`false`	Whether the item is disabled
`onSelect`	`(event: Event) => void`	`—`	Callback when the item is selected
`textValue`	`string`	`—`	Text value for typeahead search

DropdownMenu.Label

Prop	Type	Default	Description
`inset`	`boolean`	`false`	Whether the label is inset (indented to align with items)

Accessibility

Uses role="menu" with proper ARIA attributes
Arrow keys navigate between items, Enter/Space selects
Typeahead support - type to jump to matching items
Escape key closes the menu
Sub menus open with Arrow Right and close with Arrow Left
Disabled items are skipped during keyboard navigation
Checkbox and radio items announce their state to screen readers