edbnedbn/ui
Get Started
WelcomeChangelogLicenseOverview
Components
ButtonAlert DialogPopoverDropdown Menu
Motion
Motion ProviderSpring PresetsHooks
Components
Blocks
HomeDocsComponentsDropdown 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.

Source Code

Copy and paste the following code into your project.

Installation

This will also install: motion-provider

Terminal
npx shadcn@latest add https://ui.edbn.me/r/dropdown-menu.json

Basic Usage

The simplest dropdown menu requires just a Root, Trigger, Content, and Item components. Use the Separator to visually group related items.

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