Dropdown

Trigger + menu pattern. Closes on Escape key, outside click, and menu item selection. Controlled and uncontrolled.

Preview

Anatomy


import { Dropdown } from '@wire-ui/react'
 
<Dropdown.Root>
  <Dropdown.Trigger>Options</Dropdown.Trigger>
  <Dropdown.Menu>
    <button>Edit</button>
    <button>Delete</button>
  </Dropdown.Menu>
</Dropdown.Root>

Root props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`defaultOpen`	`boolean`	`false`	Initial state for uncontrolled use
`onOpenChange`	`(open: boolean) => void`	—	Called when open state changes

Data attributes

Attribute	Element	Values
`data-state`	Menu	`"open"` / `"closed"`

Trigger also sets aria-expanded.

The menu is always rendered in the DOM — use data-state to hide it:


[data-state="closed"] { display: none; }
 
/* Or with Tailwind: */
/* className="[data-state=closed]:hidden" */

Dropdown

Preview

Anatomy

Root props

Data attributes

Hiding the closed menu