Overlays

DropdownMenu

A click-triggered action menu with full arrow-key navigation, built as a compound component around a trigger element.

DropdownMenuDropdownMenuItem

Preview

Usage

tsx

import { DropdownMenu, DropdownMenuItem, Button } from "@vesture/react";

<DropdownMenu trigger={<Button>Options</Button>}>
  <DropdownMenuItem onSelect={() => rename()}>Rename</DropdownMenuItem>
  <DropdownMenuItem onSelect={() => remove()}>Delete</DropdownMenuItem>
</DropdownMenu>

Behavior

useListNavigation drives looping arrow-key navigation between items (roving tabindex); disabled items are skipped and onSelect never fires for them.
role="menu" / role="menuitem"; renders through FloatingPortal with a non-modal focus manager.
Click-triggered open, dismissible on Escape/outside click via useDismiss — same interaction model as Popover.

Props

DropdownMenu

Prop	Type	Default	Description
trigger	ReactElement	—	Required. Cloned with floating-ui reference props; click opens the menu.
placement	Placement	"bottom-start"	Floating UI placement.
children	ReactNode	—	DropdownMenuItem elements.

DropdownMenuItem

Prop	Type	Default	Description
onSelect	() => void	—	Fires on click, then closes the menu.
disabled	boolean	—	Standard disabled.
...rest	ButtonHTMLAttributes<HTMLButtonElement>	—	Spread onto the item button.