How to close a Popover when navigating with Next/Link

[zaru]

I’m using a Popover to build a dropdown menu.

Inside the Popover (more specifically, inside a Dialog component), there are text links.
I want the Popover to close when one of those links is clicked.

When using a regular <a> tag for navigation, it triggers a hard navigation and causes the entire HTML to be re-rendered, which naturally closes the Popover.

However, when using client-side routing with something like Next.js’s <Link> component, the page transitions but the Popover stays open even after navigation.

I realized that using Menu and MenuItem solves this issue, but those components don’t offer the layout flexibility I need.

Is there a recommended way to handle this?

[zaru]

I realized that using MenuSection gives me a bit more layout flexibility, and it looks like this will work for my use case. Thanks, closing this now!