# Dropdown menu: Open on hover

> `openOnHover` on the trigger opens the menu after `delay` and closes it after `closeDelay`. Clicking and the keyboard still work, so touch and keyboard users aren’t locked out.

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

## Add this example

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

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

## Source

```tsx title="components/examples/dropdown-menu/hover.tsx"
import { IconChevronDown } from "@tabler/icons-react"

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

export function DropdownMenuHover() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger
        openOnHover
        delay={120}
        closeDelay={120}
        render={<Button variant="ghost" />}
      >
        Products
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem>Analytics</DropdownMenuItem>
        <DropdownMenuItem>Engagement</DropdownMenuItem>
        <DropdownMenuItem>Security</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Props in this example

### DropdownMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `openOnHover` | `boolean` | `false` |  |
| `delay` | `number` | `100` | Milliseconds before a hover opens the menu. |
| `closeDelay` | `number` | `0` | Milliseconds before a hover-opened menu closes. |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

## 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)
- [Controlled](https://hextaui.com/docs/dropdown-menu/examples/controlled.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)