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.

[reidbarber]

Yes, you could do that. You'll just want to not close the popover when the mouse leaves the button and enters the Popover. You could track the state of isButtonHovered and isPopoverHovered and have the Popover close when both are false.

[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.