Creating a hover activated navigation menu with the Popover component

[deltasierra96]

How would one go about creating a navigation menu for a site header that's activated via hovering a button that still remains accessible? I've toyed around with using the Popover component using manual controls with the triggerRef prop, but can't seem to have any success.

I noticed that RadixUI has this component baked into their library and was wondering if this is possible with React Aria?

https://www.radix-ui.com/primitives/docs/components/navigation-menu

Thanks.

[reidbarber]

You'll want to use useHover where hoverProps goes to the trigger element, and control the open state of the Popover with isOpen and onOpenChange. Be sure it also opens via press so it is still accessible on devices without the ability to hover.

[deltasierra96]

It seems to work the way you've outlined, but there is a small issue regarding timing. When the mouse initially leaves the Button and enters focus of the Popover, it begins its closing transition until the mouse is captured within the Popover and opens back up.

When I add the hoverProps from useHover() hook to the Popover, they're ignored and only respected when used within a child element.

This is the current setup based on your recommendations.

const NavigationMenu = ({ menu }: { menu: ShopifyMenu }) => {
  const [isButtonHovered, setIsButtonHovered] = useState(false);
  let triggerRef = useRef(null);

  let { hoverProps, isHovered: isPopoverHovered } = useHover({});

  console.log('isPopoverHovered', isPopoverHovered);
  console.log('isButtonHovered', isButtonHovered);
  return (
    <div className="nav-menu flex items-center space-x-2">
      <Button
        ref={triggerRef}
        onHoverStart={() => {
          setIsButtonHovered(true);
        }}
        onHoverEnd={() => {
          setIsButtonHovered(false);
        }}
        className={clsx(
          'flex items-center rounded-md px-3 py-2 text-sm font-medium text-neutral-950 outline-none transition-colors duration-75 hover:bg-neutral-100 focus:bg-neutral-100'
        )}
      >
        Menu Root
        <Icon icon="chevron-down" className="ml-2 h-4 w-4 text-neutral-500" />
      </Button>
      <Popover isOpen={isButtonHovered || isPopoverHovered} triggerRef={triggerRef}>
        <div {...hoverProps}>
          <div className="p-2">Popover content</div>
        </div>
      </Popover>
    </div>
  );
};

Can you please suggest any improvements if possible?

[snowystinger]

You could add a timeout so you don't start closing immediately on pointer out.
The hoverProps on the child element is not necessarily a problem.

[deltasierra96]

You could add a timeout so you don't start closing immediately on pointer out. The hoverProps on the child element is not necessarily a problem.

I figured as much. I added a 3s timeout on the Button's onHoverEnd event (long delay for testing). Is this where you would think it should go? Behaviourally when the mouse leaves the Popover is it still waiting for the timeout to finish (3s) before triggering the setIsButtonHovered(false) state update and hides the Popover.

[reidbarber]

You should probably clear the timer when the mouse re-enters either.

[deebov]

It seems like it would take quite a bit of custom logic to make this work properly. I was trying to make our header menus open on hover while preserving the default functionality of DialogTrigger.

A couple of problem I encountered:

• As soon as we make the Popover controlled we have to handle the click and keyboard events of the trigger manually in order to allow opening the popover via click and keyboard.
• Having to manage the hover and focus state of both the trigger and the Popover.

I'm not sure how much of work it is to implement a hover trigger in the Popover/DialogTrigger but it would be really neat for modern components header menu and hover cards.