Component

Dropdown Menu

Click-triggered menu (wraps Base UI Menu).

Basic

A short, known list of actions tied to a single trigger - a user avatar's menu, a row's "more actions" button, a toolbar overflow.

Site navigation with hover-revealed content panels - use Navigation Menu instead.
A right-click-triggered menu - use a visible Dropdown Menu trigger instead so the action also works on touch devices.
A long, searchable action list - Command Menu's filtering is a better fit past a handful of items.

Key	Action
Enter / Space / ArrowDown	Opens the menu from the trigger.
ArrowUp / ArrowDown	Moves the highlighted item.
Enter	Activates the highlighted item.
Escape	Closes the menu and returns focus to the trigger.

Opens on tap identical to desktop click - no separate touch affordance needed.
Items keep a minimum touch-friendly height so a dense menu doesn't produce mis-taps on small screens.

Base UI applies role="menu"/"menuitem" with a roving tabindex, so only one item is a Tab stop at a time.
DropdownMenu.Separator is exposed with role="separator" so it's skipped by item navigation but still structurally present for screen readers.

Putting a form control (checkbox, input) inside a plain DropdownMenu.Item instead of using the dedicated checkbox/radio item variants where available - plain items commit and close on selection.
Triggering it from a non-button element without forwarding the render prop correctly, which drops keyboard support.

Criterion	Status	Note
Keyboard support	Supported	Arrow-key roving tabindex, Enter to activate, Escape to close.
Focus management	Supported	Focus returns to the trigger on close.
Screen reader labels	Supported	role="menu"/"menuitem" applied by Base UI automatically.
Reduced motion	Supported	prefers-reduced-motion: reduce zeroes all Fuji transition durations globally.
Reduced transparency	Supported	prefers-reduced-transparency: reduce flattens Glass to opaque surfaces (portals included).
RTL layout	Partial	Logical flex/grid gap works under dir="rtl"; directional chevrons are not yet mirrored.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/menu").Menu.Root>.

Prop	Type	Default	Description
align	"center" \| "start" \| "end"	"start"	How the menu lines up against the trigger along its cross axis. Default "start".
alignOffset	number	0	Shift in px along the cross axis, away from the `align` edge. Default 0.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	bottom	Which side of the trigger the menu opens on. Forwarded to Base UI's Positioner, which flips it when there is no room. Default "bottom".
sideOffset	number	6	Gap in px between the trigger and the menu. Default 6.

align"start"

"center" | "start" | "end"

How the menu lines up against the trigger along its cross axis. Default "start".

alignOffset0

number

Shift in px along the cross axis, away from the `align` edge. Default 0.

sidebottom

Which side of the trigger the menu opens on. Forwarded to Base UI's Positioner, which flips it when there is no room. Default "bottom".

sideOffset6

number

Gap in px between the trigger and the menu. Default 6.

Also accepts everything from React.ComponentPropsWithoutRef<typeof import("@base-ui/react/menu").Menu.Popup>.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent