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.

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

[selrond]

I’ve opened an issue about this: #8905

@deebov have you managed to make it work properly after all? Mind sharing your approach?