Component

Dropdown Menu

A dropdown menu with items, separators, labels, and disabled items. Accessible keyboard navigation and ARIA support. Uses the headless @refraction-ui/dropdown-menu core.

Examples

A menu with labels, separators, actionable items, and a disabled item.

Installation

$pnpm add @refraction-ui/react-dropdown-menu

Usage

tsx

import {
  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
  DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel,
} from '@refraction-ui/react-dropdown-menu'

export function MyComponent() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem onSelect={() => {}}>Edit</DropdownMenuItem>
        <DropdownMenuItem onSelect={() => {}}>Delete</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

Props

Prop	Type	Default	Description
`open`	`boolean`	--	Controlled open state.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	--	Callback on open change.
`children`	`ReactNode`	--	Trigger + Content with items.