A feature-rich dropdown menu component that provides a flexible way to display actions, navigation links, or form controls in a popup panel.
Installation
npx shadcn@latest add @eo-n/dropdown-menu
Install dependencies
npm install @base-ui/react lucide-react
Copy component code
Copy the dropdown menu component from the registry and paste it into your project at components/ui/dropdown-menu.tsx.
Update imports
Update the import paths to match your project setup, particularly the @/lib/utils import.
Usage
Import the components you need:
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
Basic Example
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Account</DropdownMenuItem>
<DropdownMenuItem>Notifications</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
Complete Example
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuGroupLabel,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
export default function DropdownMenuDemo() {
return (
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline">Menu</Button>} />
<DropdownMenuContent className="w-52">
<DropdownMenuGroup>
<DropdownMenuGroupLabel>Preferences</DropdownMenuGroupLabel>
<DropdownMenuItem>
Dashboard
<DropdownMenuShortcut>⌘D</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Profile
<DropdownMenuShortcut>⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>File Actions</DropdownMenuSubTrigger>
<DropdownMenuContent className="w-32">
<DropdownMenuItem>Upload Files</DropdownMenuItem>
<DropdownMenuItem>Download Files</DropdownMenuItem>
<DropdownMenuItem>Share Files</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem disabled>
Settings
<DropdownMenuShortcut>⌘,</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
Log out
<DropdownMenuShortcut>⌘L</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}
API Reference
The root component that manages the dropdown state.
The button that triggers the dropdown menu.
Custom render function to render the trigger as a different element (like a Button).
The distance in pixels from the trigger element.
align
'start' | 'center' | 'end'
Alignment of the content relative to the trigger.
Offset along the alignment axis. Defaults to -4 when align is not ‘center’.
Additional CSS classes to apply to the content.
Adds left padding to align with items that have icons.
variant
'default' | 'destructive'
default:"'default'"
Visual style variant. Use ‘destructive’ for dangerous actions like delete.
Disables the item, making it non-interactive.
Adds left padding to align with other items.
Adds left padding to align with other items.
The currently selected value.
Callback when the selected value changes.
The value of this radio item.
Whether the checkbox is checked.
onCheckedChange
(checked: boolean) => void
Callback when the checked state changes.
<DropdownMenuItem>
Save <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
Examples
With Icons
import { User, Settings, LogOut } from "lucide-react";
<DropdownMenuContent>
<DropdownMenuItem>
<User className="mr-2 h-4 w-4" />
Profile
</DropdownMenuItem>
<DropdownMenuItem>
<Settings className="mr-2 h-4 w-4" />
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<LogOut className="mr-2 h-4 w-4" />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
With Checkbox Items
<DropdownMenuContent>
<DropdownMenuCheckboxItem checked={showStatusBar}>
Show Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem checked={showActivityBar}>
Show Activity Bar
</DropdownMenuCheckboxItem>
</DropdownMenuContent>
With Radio Group
<DropdownMenuContent>
<DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>
<DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuContent>
Features
- Flexible Positioning: Configurable alignment and offset options
- Nested Sub-menus: Support for multi-level menu hierarchies
- Rich Content: Support for icons, shortcuts, checkboxes, and radio items
- Variant Styles: Built-in destructive variant for dangerous actions
- Keyboard Navigation: Full keyboard support with arrow keys
- Collision Detection: Automatically adjusts position to stay in viewport
- Smooth Animations: Built-in entrance and exit animations
- Accessible: Proper ARIA attributes and focus management
Accessibility
- Keyboard navigation with arrow keys, Enter, and Escape
- Focus management and focus trapping
- Proper ARIA roles and attributes
- Screen reader announcements for state changes
- Disabled state support
