A flexible dropdown menu component with smooth animations, smart positioning, and customizable styling.
Overview
The Dropdown Menu component provides a compound component pattern for creating interactive dropdown menus with smooth animations, keyboard navigation, and smart positioning. It automatically adjusts placement based on available screen space and supports multiple alignment options.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/dropdown-menu.json
Usage
1"use client"23import * as React from "react"4import { LogOut, Settings, User } from "lucide-react"56import {7 Dropdown,8 DropdownContent,9 DropdownItem,10 DropdownSeparator,11 DropdownTrigger,12} from "@/components/dropdown-menu"1314export function UserMenu() {15 return (16 <Dropdown>17 <DropdownTrigger>18 <button className="p-2 rounded-md border">19 <User className="h-4 w-4" />20 </button>21 </DropdownTrigger>22 <DropdownContent align="end">23 <DropdownItem>24 <Settings className="h-4 w-4 mr-2" />25 Settings26 </DropdownItem>27 <DropdownSeparator />28 <DropdownItem destructive>29 <LogOut className="h-4 w-4 mr-2" />30 Log out31 </DropdownItem>32 </DropdownContent>33 </Dropdown>34 )35}
API Reference
Dropdown
The root container component that provides context for all dropdown subcomponents.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The dropdown trigger and content components |
className | string | - | Additional CSS classes for the dropdown container |
DropdownTrigger
The trigger element that opens/closes the dropdown when clicked.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The trigger content (button, avatar, etc.) |
className | string | - | Additional CSS classes for the trigger |
DropdownContent
The content container that appears when the dropdown is open.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The dropdown items and separators |
className | string | - | Additional CSS classes for the content |
align | "start" | "center" | "end" | "start" | Horizontal alignment relative to trigger |
side | "left" | "right" | "left" | Which side to align from |
placement | "top" | "bottom" | "auto" | "auto" | Vertical placement relative to trigger |
sideOffset | number | 1 | Distance from trigger in pixels |
DropdownItem
Individual clickable items within the dropdown.
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The item content |
className | string | - | Additional CSS classes for the item |
onClick | () => void | - | Callback when item is clicked |
disabled | boolean | false | Whether the item is disabled |
destructive | boolean | false | Whether to style as destructive action |
DropdownSeparator
A visual separator between dropdown items.
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes for the separator |
Features
Smart Positioning
The dropdown automatically adjusts its position based on available screen space when placement="auto" is used.
Keyboard Navigation
- Escape: Closes the dropdown
- Tab: Normal tab navigation
- Click outside: Closes the dropdown
Animations
Smooth spring-based animations using Framer Motion with proper transform origins based on positioning.
Accessibility
- Proper ARIA attributes
- Keyboard navigation support
- Focus management
- Screen reader friendly
Examples
Different Alignments
1// Align to start (left/right edge)2<DropdownContent align="start">3 {/* items */}4</DropdownContent>56// Center alignment7<DropdownContent align="center">8 {/* items */}9</DropdownContent>1011// Align to end (opposite edge)12<DropdownContent align="end">13 {/* items */}14</DropdownContent>
Custom Positioning
1// Position above trigger2<DropdownContent placement="top" sideOffset={12}>3 {/* items */}4</DropdownContent>56// Position below with custom offset7<DropdownContent placement="bottom" sideOffset={4}>8 {/* items */}9</DropdownContent>
With Icons and States
1<DropdownContent>2 <DropdownItem>3 <User className="h-4 w-4 mr-2" />4 Profile5 </DropdownItem>6 <DropdownItem disabled>7 <Settings className="h-4 w-4 mr-2" />8 Settings (disabled)9 </DropdownItem>10 <DropdownSeparator />11 <DropdownItem destructive>12 <LogOut className="h-4 w-4 mr-2" />13 Delete Account14 </DropdownItem>15</DropdownContent>
Profile Dropdown
A more complex example with user profile information:
Auto-Positioning
Demonstrates the smart positioning feature where dropdowns automatically adjust their placement based on available screen space:
