# Dropdown menu: Controlled

> Pass `open` and `onOpenChange`. The second argument says why the menu changed, such as a trigger press, an item press or Escape. Items with `closeOnClick={false}` keep it open.

Example: https://hextaui.com/docs/dropdown-menu/examples/controlled
Component docs: https://hextaui.com/docs/dropdown-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dropdown-menu-controlled.json
```

This adds `components/examples/dropdown-menu/controlled.tsx` with the Dropdown menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dropdown-menu/controlled.tsx"
"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuControlled() {
  const [open, setOpen] = React.useState(false)
  const [reason, setReason] = React.useState("none")

  return (
    <div className="flex flex-col items-center gap-3">
      <DropdownMenu
        open={open}
        onOpenChange={(next, details) => {
          setOpen(next)
          setReason(details.reason)
        }}
      >
        <DropdownMenuTrigger render={<Button variant="outline" />}>
          Controlled
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Closes the menu</DropdownMenuItem>
          <DropdownMenuItem closeOnClick={false}>Stays open</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
      <p className="text-sm text-muted-foreground">
        Open: {String(open)} · last reason: {reason}
      </p>
    </div>
  )
}
```

## Props in this example

### DropdownMenu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `open` | `boolean` | – |  |
| `onOpenChange` | `(open: boolean, details) => void` | – | details.reason says what caused the change. |

### DropdownMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DropdownMenuItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `closeOnClick` | `boolean` | `true` |  |

## More Dropdown menu examples

- [Safe area](https://hextaui.com/docs/dropdown-menu/examples/safe-area.md)
- [Checkboxes](https://hextaui.com/docs/dropdown-menu/examples/checkboxes.md)
- [Radio group](https://hextaui.com/docs/dropdown-menu/examples/radio-group.md)
- [Check on the right](https://hextaui.com/docs/dropdown-menu/examples/indicator-end.md)
- [Select-like](https://hextaui.com/docs/dropdown-menu/examples/select.md)
- [Row actions](https://hextaui.com/docs/dropdown-menu/examples/row-actions.md)
- [Open on hover](https://hextaui.com/docs/dropdown-menu/examples/hover.md)
- [Disabled](https://hextaui.com/docs/dropdown-menu/examples/disabled.md)
- [Long content](https://hextaui.com/docs/dropdown-menu/examples/long-content.md)
- [Scrolling](https://hextaui.com/docs/dropdown-menu/examples/scrolling.md)
- [Inside a sheet](https://hextaui.com/docs/dropdown-menu/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/dropdown-menu/examples/rtl.md)