dropdown-menu.tsx

Overview

dropdown-menu.tsx is a React component module that provides a fully customizable and accessible dropdown menu system built on top of the @radix-ui/react-dropdown-menu primitive components. It extends and styles the base Radix UI dropdown primitives with TailwindCSS utility classes and integrates icons from the lucide-react icon library for enhanced visual cues.

This module exports a set of reusable dropdown menu components that support advanced features such as nested submenus, radio groups, checkbox items, labels, separators, and keyboard shortcuts. It abstracts away the complexity of Radix UI’s low-level API into a cleaner and more consistent component interface.

Components and Exports

1. DropdownMenu

• Type: DropdownMenuPrimitive.Root

• Description: The root container component for the dropdown menu. This acts as the context provider for all dropdown menu state and behavior.

• Usage Example:

  <DropdownMenu>
    <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Item 1</DropdownMenuItem>
      <DropdownMenuItem>Item 2</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
  

2. DropdownMenuTrigger

• Type: DropdownMenuPrimitive.Trigger

• Description: The button or element that toggles the dropdown menu visibility.

• Usage Example:

  <DropdownMenuTrigger>Options</DropdownMenuTrigger>
  

3. DropdownMenuContent

• Type: React component forwarding ref to DropdownMenuPrimitive.Content

• Props:

  • className?: string — Additional CSS classes.

  • sideOffset?: number — Offset in pixels from the trigger element (default: 4).

  • Other native DropdownMenuPrimitive.Content props.

• Description: The container that holds the dropdown menu items. It is rendered inside a portal to avoid z-index and overflow issues.

• Behavior: Applies animations and styling for open/close states and placement sides.

• Usage Example:

  <DropdownMenuContent sideOffset={8}>
    <DropdownMenuItem>Profile</DropdownMenuItem>
  </DropdownMenuContent>
  

4. DropdownMenuItem

• Type: React component forwarding ref to DropdownMenuPrimitive.Item

• Props:

  • inset?: boolean — If true, adds left padding for alignment.

  • justifyBetween?: boolean (default: true) — Controls whether content is spaced between flex items.

  • className?: string — Additional CSS classes.

  • Other native DropdownMenuPrimitive.Item props.

• Description: Represents a selectable item inside the dropdown.

• Usage Example:

  <DropdownMenuItem inset onSelect={() => alert('Clicked!')}>
    Settings
  </DropdownMenuItem>
  

5. DropdownMenuCheckboxItem

• Type: React component forwarding ref to DropdownMenuPrimitive.CheckboxItem

• Props:

  • checked?: boolean — Controlled checked state.

  • className?: string

  • Other native props.

• Description: A checkbox item that can toggle its checked state.

• Visuals: Displays a checkmark icon (Check from lucide-react) when checked.

• Usage Example:

  <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setIsChecked}>
    Enable notifications
  </DropdownMenuCheckboxItem>
  

6. DropdownMenuRadioGroup

• Type: DropdownMenuPrimitive.RadioGroup

• Description: Groups radio items inside the dropdown, enabling single selection among them.

• Usage Example:

  <DropdownMenuRadioGroup value={selected} onValueChange={setSelected}>
    <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
  </DropdownMenuRadioGroup>
  

7. DropdownMenuRadioItem

• Type: React component forwarding ref to DropdownMenuPrimitive.RadioItem

• Props:

  • className?: string

  • Other native props.

• Description: Represents a radio button item inside a radio group.

• Visuals: Displays a filled circle (Circle icon) when selected.

• Usage Example:

  <DropdownMenuRadioItem value="dark">Dark Mode</DropdownMenuRadioItem>
  

8. DropdownMenuSub

• Type: DropdownMenuPrimitive.Sub

• Description: Wrapper component for nested submenu logic.

• Usage Example:

  <DropdownMenuSub>
    <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
    <DropdownMenuSubContent>
      <DropdownMenuItem>Sub Option 1</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuSub>
  

9. DropdownMenuSubTrigger

• Type: React component forwarding ref to DropdownMenuPrimitive.SubTrigger

• Props:

  • inset?: boolean — Adds left padding for alignment.

  • className?: string

  • Other native props.

• Description: The submenu trigger item that reveals nested submenu on hover/focus.

• Visuals: Displays a right-pointing chevron icon (ChevronRight) aligned to the right.

• Usage Example:

  <DropdownMenuSubTrigger inset>
    Advanced Settings
  </DropdownMenuSubTrigger>
  

10. DropdownMenuSubContent

• Type: React component forwarding ref to DropdownMenuPrimitive.SubContent

• Props:

  • className?: string

  • Other native props.

• Description: Container for submenu items rendered with appropriate animations and styling.

• Usage Example:

  <DropdownMenuSubContent>
    <DropdownMenuItem>Sub Item 1</DropdownMenuItem>
  </DropdownMenuSubContent>
  

11. DropdownMenuGroup

• Type: DropdownMenuPrimitive.Group

• Description: Used to group related menu items visually and semantically.

• Usage Example:

  <DropdownMenuGroup>
    <DropdownMenuItem>Group Item 1</DropdownMenuItem>
  </DropdownMenuGroup>
  

12. DropdownMenuLabel

• Type: React component forwarding ref to DropdownMenuPrimitive.Label

• Props:

  • inset?: boolean — Adds left padding.

  • className?: string

  • Other native props.

• Description: Displays a non-interactive label inside the dropdown menu, often used to label groups.

• Usage Example:

  <DropdownMenuLabel inset>Preferences</DropdownMenuLabel>
  

13. DropdownMenuSeparator

• Type: React component forwarding ref to DropdownMenuPrimitive.Separator

• Props:

  • className?: string

  • Other native props.

• Description: A horizontal separator line to visually separate groups of items.

• Usage Example:

  <DropdownMenuSeparator />
  

14. DropdownMenuShortcut

• Type: Functional component

• Props:

  • className?: string

  • Other native span element props.

• Description: Displays keyboard shortcut hints aligned to the right side of a menu item.

• Usage Example:

  <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
  

Implementation Details

• Styling: Uses cn utility function to conditionally compose TailwindCSS classes, ensuring consistent styling across components.

• Iconography: Uses lucide-react icons (Check, ChevronRight, Circle) to indicate states like checked, submenu presence, and radio selection.

• Accessibility: Leverages Radix UI primitives which handle ARIA roles, keyboard navigation, focus management, and accessibility best practices out of the box.

• Animation: Applies TailwindCSS animation classes tied to Radix UI's data attributes (e.g., data-state, data-side) for smooth open/close and placement transitions.

• Forwarding Refs: All interactive components are wrapped with React.forwardRef to allow ref forwarding to DOM elements, helpful for accessibility and integration.

• Submenus: Support for nested dropdowns through <DropdownMenuSub>, <DropdownMenuSubTrigger>, and <DropdownMenuSubContent> components.

Interaction with Other System Parts

• Utility Functions: Imports the cn utility from '@/lib/utils' to concatenate CSS classes conditionally.

• Icon Library: Uses icons from lucide-react for visual indicators.

• Radix UI: Completely built on Radix UI's accessible dropdown menu primitives (@radix-ui/react-dropdown-menu), providing the foundation for menu logic and accessibility.

• Styling: Assumes TailwindCSS is configured in the project for utility classes used throughout.

• Usage Context: This file is intended to be imported and used wherever dropdown menus are needed across the application, providing a consistent UI/UX and behavior.

Examples of Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuCheckboxItem,
  DropdownMenuShortcut,
} from './dropdown-menu';

function Example() {
  const [checked, setChecked] = React.useState(false);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
      <DropdownMenuContent sideOffset={6}>
        <DropdownMenuItem>
          New File <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>Open File</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={checked} onCheckedChange={setChecked}>
          Enable Dark Mode
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Mermaid Component Diagram

componentDiagram
    component DropdownMenuRoot as DropdownMenu
    component DropdownMenuTrigger
    component DropdownMenuContent
    component DropdownMenuItem
    component DropdownMenuCheckboxItem
    component DropdownMenuRadioGroup
    component DropdownMenuRadioItem
    component DropdownMenuSub
    component DropdownMenuSubTrigger
    component DropdownMenuSubContent
    component DropdownMenuGroup
    component DropdownMenuLabel
    component DropdownMenuSeparator
    component DropdownMenuShortcut

    DropdownMenuRoot --> DropdownMenuTrigger : triggers
    DropdownMenuRoot --> DropdownMenuContent : contains
    DropdownMenuContent --> DropdownMenuItem : contains
    DropdownMenuContent --> DropdownMenuCheckboxItem : contains
    DropdownMenuContent --> DropdownMenuRadioGroup : contains
    DropdownMenuRadioGroup --> DropdownMenuRadioItem : contains
    DropdownMenuContent --> DropdownMenuSub : contains
    DropdownMenuSub --> DropdownMenuSubTrigger : triggers submenu
    DropdownMenuSub --> DropdownMenuSubContent : contains submenu items
    DropdownMenuContent --> DropdownMenuGroup : groups items
    DropdownMenuContent --> DropdownMenuLabel : labels groups
    DropdownMenuContent --> DropdownMenuSeparator : separates groups
    DropdownMenuItem --> DropdownMenuShortcut : shows shortcut

Summary

This file provides a complete, accessible, and styled dropdown menu system using Radix UI primitives combined with TailwindCSS and iconography. It is designed for modular usage with support for complex menus featuring submenus, checkboxes, radio groups, labels, and keyboard shortcuts, all while maintaining consistent styling and behavior across an application.