edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown Menu
Pull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
Components
BlocksMaps
HomeDocsComponentsAnimatedDropdown Menu

On this page

Dropdown Menu

A comprehensive dropdown menu system with morphing animations, keyboard navigation, and full accessibility support. Built on Radix UI primitives with Motion spring physics for buttery-smooth interactions.

Usage

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
} from "@/components/ui/animated/dropdown-menu"
<DropdownMenu>
  <DropdownMenuTrigger>Open</DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuItem>Logout</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Installation

Examples

Basic Menu

The simplest dropdown menu with items and separator.

With Icons & Shortcuts

Enhance menu items with leading icons and trailing keyboard shortcuts using the Shortcut sub-component. Icons are placed before text with mr-2 spacing.

Checkbox Items

Use CheckboxItem for toggle-able boolean options. Each item manages its own state via checked and onCheckedChange props, with smooth animated checkmarks.

Radio Items

For mutually exclusive selections, wrap RadioItem components inside a RadioGroup. The group manages the selected value via value and onValueChange props.

Submenus

Create nested navigation using Sub, SubTrigger, and SubContent. Use controlled state with open and onOpenChange to sync the trigger button state.

API Reference

DropdownMenu

Container component that manages dropdown state and provides context.

PropTypeDefaultDescription
openboolean—Controlled open state
defaultOpenbooleanfalseDefault open state (uncontrolled)
onOpenChange(open: boolean) => void—Callback when open state changes
disableAnimationbooleanfalseDisable motion animations
variantsVariants—Custom motion animation variants
modalbooleanfalseWhether to render as modal
preventScrollbooleanfalseWhether to prevent page scroll when open
dir"ltr" | "rtl"—Direction for RTL support

DropdownMenuContent

Main dropdown panel with animations and positioning.

PropTypeDefaultDescription
sideOffsetnumber6Offset from the trigger
align"start" | "center" | "end""start"Alignment relative to trigger
side"top" | "right" | "bottom" | "left""bottom"Side to render on
loopbooleantrueEnable loop navigation with arrow keys

DropdownMenuItem

Interactive menu item with stagger animations.

PropTypeDefaultDescription
insetbooleanfalseAdd left padding for alignment with checkbox/radio items
variant"default" | "destructive""default"Visual variant for styling
disabledbooleanfalseDisable the item
onSelect(event) => void—Callback when selected

DropdownMenuCheckboxItem

Toggleable checkbox item with animated indicator.

PropTypeDefaultDescription
checkedboolean | 'indeterminate'—Controlled checked state
onCheckedChange(checked: boolean) => void—Callback when checked state changes

DropdownMenuRadioGroup / RadioItem

Radio selection group with animated indicators.

PropTypeDefaultDescription
valuestring—Controlled value of selected radio item
onValueChange(value: string) => void—Callback when value changes

DropdownMenuSub

Nested submenu container for hierarchical menus.

PropTypeDefaultDescription
openboolean—Controlled open state of submenu
defaultOpenboolean—Default open state
onOpenChange(open: boolean) => void—Callback when submenu open state changes

Accessibility

Full WAI-ARIA menu button pattern with semantic roles and comprehensive keyboard support. Built on Radix UI primitives for battle-tested accessibility.

Keyboard

↑↓
Navigate items
Enter/Space
Select item / Open menu
→←
Open / close submenus
EscClose menu
HomeEnd
Jump to first / last item

ARIA Roles & Attributes

Trigger aria-haspopup="menu"
Indicates the trigger opens a menu. Includes aria-expanded for open state.
Content role="menu"
The dropdown panel is announced as a menu to screen readers.
Items role="menuitem"
Standard items use menuitem, checkboxes use menuitemcheckbox, and radios use menuitemradio.

Animation Features

  • Menu items animate in with staggered delay (0.035s between items)
  • Spring-based physics for natural motion (stiffness: 260, damping: 32)
  • Checkbox and radio indicators animate with bouncy springs when toggled
  • Glassmorphism backdrop blur with 80% opacity
  • All animations respect prefers-reduced-motion