2

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?

David Ferris
  • 2,215
  • 6
  • 28
  • 53

0 Answers0