Dropdown Menu
DropdownMenu Primitive
Headless, unstyled dropdown menu primitive with full accessibility support.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
DropdownMenuTriggerPrimitive renders its own button element.
With AsChild
Button receives click behavior via TriggerContext.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
Controlled State
Control the menu's open state from your component code.
State: Closed
Keyboard Navigation
Full keyboard navigation with arrow keys, Home/End, Enter/Space, and Escape.
Try keyboard navigation!
Positioning Options
Position the menu on different sides with alignment control.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Included by default
Menu ARIA roles, keyboard navigation, focus management, and outside-click close behavior are included out of the box.
Keyboard Shortcuts
Navigate and interact with menus using keyboard.
Open menuEnter / Space
Navigate itemsArrow Keys
First / Last itemHome / End
Close menuEscape
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool? | — | Controls whether the menu is open (controlled mode). |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| Side | PopoverSide | Bottom | Which side of the trigger to position the content. |
| Align | PopoverAlign | Start | How to align the content relative to the trigger. |
| Disabled | bool | false | Whether a menu item is disabled. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use DropdownMenu Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Want to apply your own CSS framework
- ✓Creating unique visual designs
Use Styled Component
- ●Want shadcn/ui design out of the box
- ●Need quick implementation
- ●Like the default styling
- ●Prefer convention over configuration