I'm using a radix-ui Menubar that works well! The Menubar opens using the Menubar.Trigger radix component.
import * as Menubar from "@radix-ui/react-menubar";
<Menubar.Root
onValueChange={(value) => {
if (onOpenChange) onOpenChange(Boolean(value));
}}
>
<Menubar.Menu>
<div
className={`relative inline-block idle`}
>
<IconV2 />
</div>
<Menubar.Trigger>
<ChevronDown width={10} />
</Menubar.Trigger>
<Menubar.Portal>
<Menubar.Content align="start">
<Menubar.Item onClick={onClick}>
Option 1
</Menubar.Item>
<Menubar.Item onClick={onClick}>
Option 2
</MenubarItem>
</Menubar.Content>
</Menubar.Portal>
</Menubar.Menu>
</Menubar.Root>
However, this is not a controlled component- how can I open it onHover
on the trigger?