104Get started
HextaUI

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.

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>
  )
}

Add this example

This adds the example as components/examples/dropdown-menu/hover.tsx, together with the Dropdown menu component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/dropdown-menu-hover.json

To add only the component, follow the Dropdown menu installation.

Props in this example

The Dropdown menu props this example sets, from the API reference.

DropdownMenuTrigger

PropTypeDefault
openOnHover
booleanfalse
delayMilliseconds before a hover opens the menu.
number100
closeDelayMilliseconds before a hover-opened menu closes.
number0
render
ReactElement | (props, state) => ReactElement<button>

Every prop is in the Dropdown menu API reference.

More Dropdown menu examples

See them all, with keyboard support and accessibility notes, on the Dropdown menu page.

Related components