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

Usage

tsx

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

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.
`DropdownMenuContent align`	`'start' \| 'center' \| 'end'`	`'start'`	The menu is portalled to <body> and anchored under the trigger (following scroll/resize); align picks which trigger edge it lines up with. A pointer press outside closes it.
`DropdownMenuContent sideOffset`	`number`	`4`	Gap in px between trigger and menu.

DropdownMenuTrigger props

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge the trigger props/behavior onto the child element instead of rendering a <button> around it. Use with styled triggers like <Button> to avoid nesting a button in a button.

DropdownMenuItem props

Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables the item: removes it from tab order and blocks selection.
`onSelect`	`() => void`	--	Callback fired when the item is selected via click or Enter/Space, before the menu closes.