docs / core / dropdown-menu

DropdownMenu

a list of actions anchored to whatever triggered them. it portals above everything and hands the arrow keys the list. actions, not navigation.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

hangs off an icon Button in a Toolbar, a table row's overflow, a card cornerSeparator groups items, Label names a groupnavigation goes in a link, never in a menu itemno inputs or forms inside. that is a Popover

a11y

menu semantics from Base UI · arrow keys rove, Enter selects, Escape closes · disabled items carry data-disabledjest-axe

dependencies

@base-ui/react
live demo · try it out
customize
triggerthe button text
Labelgroup name above items, empty hides it
sideOffsetgap between trigger and panel
6
disableddims the delete item, blocks selection
usagecopy
import { DropdownMenu } from "@usva-ui/react/primitives/dropdown-menu";

<DropdownMenu>
  <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Actions</DropdownMenu.Label>
    <DropdownMenu.Item>Edit</DropdownMenu.Item>
    <DropdownMenu.Item>Duplicate</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item disabled>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

props

proptypedefaultnotes
openboolean—controlled open state.
defaultOpenbooleanfalseinitial open state when uncontrolled.
onOpenChange(open, details) => void—fires when the menu opens or closes.
Content sideOffsetnumber6gap between the trigger and the panel.
Item onSelect(event) => void—fires when the item is picked, by click or Enter.
Item disabledbooleanfalsedims the item and blocks selection.

get it

bun add @usva-ui/reactcopy
usagecopy
import { DropdownMenu } from "@usva-ui/react/primitives/dropdown-menu";

<DropdownMenu>
  <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item onSelect={handleEdit}>Edit</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item disabled>Delete</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>