Docs

Dropdown Menu

A flexible dropdown menu component built on Radix UI with smooth animations and customizable styling.

Overview

The Dropdown Menu component is built on top of Radix UI's dropdown-menu primitive, providing a robust and accessible dropdown menu solution with built-in keyboard navigation, focus management, and positioning capabilities.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/dropdown-menu.json

Usage

"use client"


import { LogOut, Settings } from "lucide-react"


import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/dropdown-menu"


export function UserMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>
          <Settings className="h-4 w-4 mr-2" />
          Settings
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-destructive focus:text-destructive focus:bg-destructive/10">
          <LogOut className="h-4 w-4 mr-2" />
          Log out
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

API Reference

DropdownMenu

The root container component that provides context for all dropdown subcomponents. Built on Radix UI's DropdownMenu.Root.

NameTypeDefaultDescription
childrenReactNode-The dropdown trigger and content components
openboolean-The controlled open state of the dropdown
onOpenChange(open: boolean) => void-Event handler called when the open state changes
defaultOpenbooleanfalseThe open state of the dropdown when initially rendered

DropdownMenuTrigger

The trigger element that opens/closes the dropdown when clicked. Built on Radix UI's DropdownMenu.Trigger.

NameTypeDefaultDescription
childrenReactNode-The trigger content (button, avatar, etc.)
asChildbooleanfalseChange the component to merge props into the child

DropdownMenuContent

The content container that appears when the dropdown is open. Built on Radix UI's DropdownMenu.Content.

NameTypeDefaultDescription
childrenReactNode-The dropdown items and separators
classNamestring-Additional CSS classes for the content
side"top" | "right" | "bottom" | "left""bottom"The preferred side of the trigger to render against
align"start" | "center" | "end""center"The preferred alignment against the trigger
sideOffsetnumber4The distance in pixels from the trigger
alignOffsetnumber0An offset in pixels from the "start" or "end" alignment options

DropdownMenuItem

Individual clickable items within the dropdown. Built on Radix UI's DropdownMenu.Item.

NameTypeDefaultDescription
childrenReactNode-The item content
classNamestring-Additional CSS classes for the item
onSelect(event: Event) => void-Event handler called when the user selects an item
disabledbooleanfalseWhether the item is disabled

DropdownMenuSeparator

A visual separator between dropdown items. Built on Radix UI's DropdownMenu.Separator.

NameTypeDefaultDescription
classNamestring-Additional CSS classes for the separator

Features

Smart Positioning

Built on Radix UI's collision detection system, the dropdown automatically adjusts its position based on available viewport space.

Keyboard Navigation

  • Escape: Closes the dropdown
  • Arrow Keys: Navigate between items
  • Enter/Space: Activate focused item
  • Tab: Close dropdown and continue tab sequence
  • Click outside: Closes the dropdown

Animations

Smooth CSS-based animations with proper transform origins using Tailwind CSS animation utilities.

Accessibility

  • Full compliance with WAI-ARIA design patterns
  • Keyboard navigation support
  • Focus management with focus trapping
  • Screen reader announcements
  • Proper semantic markup

Examples

Different Alignments

// Align to start (left edge)
<DropdownMenuContent side="bottom" align="start">
  {/* items */}
</DropdownMenuContent>


// Center alignment
<DropdownMenuContent side="bottom" align="center">
  {/* items */}
</DropdownMenuContent>


// Align to end (right edge)
<DropdownMenuContent side="bottom" align="end">
  {/* items */}
</DropdownMenuContent>

Custom Positioning

// Position above trigger
<DropdownMenuContent side="top" sideOffset={8}>
  {/* items */}
</DropdownMenuContent>


// Position to the right with custom offset
<DropdownMenuContent side="right" sideOffset={4}>
  {/* items */}
</DropdownMenuContent>

With Icons and States

<DropdownMenuContent>
  <DropdownMenuItem>
    <User className="h-4 w-4 mr-2" />
    Profile
  </DropdownMenuItem>
  <DropdownMenuItem disabled>
    <Settings className="h-4 w-4 mr-2" />
    Settings (disabled)
  </DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem className="text-destructive focus:text-destructive focus:bg-destructive/10">
    <LogOut className="h-4 w-4 mr-2" />
    Delete Account
  </DropdownMenuItem>
</DropdownMenuContent>

Profile Dropdown

A more complex example with user profile information:

Positioning

Demonstrates different positioning options using Radix UI's built-in collision detection:

Open in

Positioning Demo

Click the avatars to see different alignments

Top-left aligns start • Bottom-right aligns end

Previous Page
Admonition
Next Page
Drawer