Radix dropdownmenu to trigger on hover

[ayaniv]

I want to use the Radix Dropdown-Menu to be opened not on click but on hover instead.
So my idea is that you'll let the developer choose how to trigger the drop-down menu - "hover" or "click" while still keeping the amazing a11y.

[joaom00]

You can control the dropdown with open and onOpenChange props

const [open, setOpen] = React.useState(false)

<DropdownMenu.Root open={open} onOpenChange={setOpen}>
  ...
</DropdownMenu.Root>

[danielx-art]

Yes, but how to make it open on hover? When the trigger is hovered as well as clicked? Would be cool if it was implemented as a prop of the dropdown root itself, like trigger="click"|"hover"|"both".

[aditya22314]

But here i am not able to allowed to use states for the opening and closing of the triggerer.Is there any alternative way to trigger it while hovering ?

[pruthvi2103]

You can do
<DropdownMenu.Root open={open} onOpenChange={setOpen}>
...

<Button onMouseOver={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>

remove onMouseLeave if you dont want it to close