dropdown-menu.tsx)¶

Overview¶

A versatile dropdown menu component built with Radix UI that provides accessible dropdown functionality with support for submenus, checkboxes, and radio items.

Features¶

Submenu support
Checkbox items
Radio group items
Keyboard navigation
Focus management
Animation effects
Custom triggers
Responsive design
Accessibility support
Position management

Dependencies¶

import * as React from 'react'
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
import { Check, ChevronRight, Circle } from 'lucide-react'
import { cn } from '@/lib/utils'

Props¶

interface DropdownMenuProps extends DropdownMenuPrimitive.DropdownMenuProps {
  children: ReactNode;
}

interface DropdownMenuTriggerProps extends DropdownMenuPrimitive.DropdownMenuTriggerProps {
  children: ReactNode;
}

interface DropdownMenuContentProps extends DropdownMenuPrimitive.DropdownMenuContentProps {
  className?: string;
  sideOffset?: number;
  align?: 'start' | 'center' | 'end';
  children: ReactNode;
}

interface DropdownMenuItemProps extends DropdownMenuPrimitive.DropdownMenuItemProps {
  inset?: boolean;
  className?: string;
  children: ReactNode;
}

interface DropdownMenuCheckboxItemProps extends DropdownMenuPrimitive.DropdownMenuCheckboxItemProps {
  className?: string;
  children: ReactNode;
}

interface DropdownMenuRadioItemProps extends DropdownMenuPrimitive.DropdownMenuRadioItemProps {
  className?: string;
  children: ReactNode;
}

Implementation¶

State Management¶

const [open, setOpen] = useState(false);

const handleOpenChange = (open: boolean) => {
  setOpen(open);
  onOpenChange?.(open);
};

Methods¶

const handleSelect = (value: string) => {
  onSelect?.(value);
  setOpen(false);
};

const handleEscapeKeyDown = (event: KeyboardEvent) => {
  if (event.key === 'Escape') {
    setOpen(false);
  }
};

Unique Functionality¶

Submenu handling
Checkbox state management
Radio group selection
Position calculation
Animation states
Focus management

HTML Structure¶

<DropdownMenuPrimitive.Root>
  // ... existing implementation ...
</DropdownMenuPrimitive.Root>

API Integration¶

No direct API integration.

Components Used¶

DropdownMenu
DropdownMenuTrigger
DropdownMenuContent
DropdownMenuItem
DropdownMenuCheckboxItem
DropdownMenuRadioItem
DropdownMenuLabel
DropdownMenuSeparator
DropdownMenuShortcut
DropdownMenuGroup
DropdownMenuPortal
DropdownMenuSub
DropdownMenuSubContent
DropdownMenuSubTrigger
DropdownMenuRadioGroup

Notes¶

Built on Radix UI primitives
Handles keyboard navigation
Manages focus states
Supports nested menus
Provides checkbox and radio options
Maintains accessibility features
Uses React Portal for rendering