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

DropdownMenuTrigger 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.

✓ ARIA attributes: role="menu", aria-expanded, aria-orientation applied

✓ Keyboard navigation: Full arrow key support with Home/End

✓ Screen reader support: Proper menu role and item announcements

✓ Focus management: Roving tab index pattern

✓ Click outside: Auto-close when clicking outside

Keyboard Shortcuts

Navigate and interact with menus using keyboard.

Open menu Enter / Space

Navigate items Arrow Keys

First / Last item Home / End

Select item Enter

Close menu Escape

API Reference

Component properties and parameters.

DropdownMenu

Open

Type: bool?
Controls whether the menu is open (controlled mode).

OpenChanged

Type: EventCallback<bool>
Callback invoked when the open state changes.

DropdownMenuContent

Side

Type: "top" | "right" | "bottom" | "left"
Default: "bottom"
Which side of the trigger to position the content.

Align

Type: "start" | "center" | "end"
Default: "start"
How to align the content relative to the trigger.

DropdownMenuItem

OnClick

Type: EventCallback
Callback invoked when the item is clicked.

Disabled

Type: bool
Default: false
Whether the 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