DropdownMenu

DropdownMenu is a menu component anchored to a trigger element. It supports regular items, checkbox items, radio items, groups, labels, separators, and nested submenus. It handles keyboard navigation, focus management, and proper ARIA attributes.

Usage

import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuSeparator } from '@loke/ui/dropdown-menu';
import { ChevronDown } from 'lucide-react';

export default function Example() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <button>Menu <ChevronDown /></button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>New Project</DropdownMenuItem>
        <DropdownMenuItem>Open Recent</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={true}>Show Details</DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Sub-components

• DropdownMenuTrigger — Button that opens/closes the menu
• DropdownMenuPortal — Portal container for the menu
• DropdownMenuContent — Menu container with positioning
• DropdownMenuItem — Regular action item
• DropdownMenuCheckboxItem — Checkbox item for toggles
• DropdownMenuRadioGroup — Container for radio items (mutually exclusive)
• DropdownMenuRadioItem — Radio item within a group
• DropdownMenuLabel — Non-interactive label
• DropdownMenuSeparator — Visual divider
• DropdownMenuGroup — Groups related items
• DropdownMenuSub — Nested submenu
• DropdownMenuSubTrigger — Trigger for submenu
• DropdownMenuSubContent — Submenu content
• DropdownMenuArrow — Arrow pointing to trigger

Props

Examples

Basic dropdown

Checkbox items

With submenu and radio group

Accessibility

• Arrow keys navigate items; Enter activates.
• Escape closes the menu.
• Checkbox items show aria-checked.
• Radio items are mutually exclusive within a group.
• Disabled items are not focusable.
• Submenus are announced as expandable.

Best practices

• Use DropdownMenuItem for single actions, DropdownMenuCheckboxItem for toggles, and DropdownMenuRadioItem for exclusive options.
• Group related items with DropdownMenuGroup and separators.
• Keep menu items concise and action-oriented.
• Use submenus sparingly; deep nesting is hard to navigate.
• Provide clear visual feedback (checkmarks, radio dots) for state.