How to make MenuBar close upon Next Link click

[Gustavo-Feijo]

I'm using the MenuBar component, alongside the NextLink (Using a wrapper from Next-Intl), where the goal is to build a simple dashboard, where the MenuBar would be on the layout and have multiple links to change the route and so get the respective dashboard content.

<MenubarContent>
        <MenubarItem>
          <Link href="/admin/dashboard/books/new">{t("new")}</Link>
        </MenubarItem>
<MenuBarContent/>

When clicking the Link component inside the url changes, as well as the content of the dashbord, but the menu still appears until clicking outside the menu. There is any way to make the menu close when clicking the Link? Or would be better to just use the NavigationMenu?

Thanks in advance.

[mohamedtsx]

Just add the asChild prop to MenubarItem:

  <MenubarContent>
    <MenubarItem asChild>
      <Link href="/admin/dashboard/books/new">{t("new")}</Link>
    </MenubarItem>
  </MenubarContent>

For more details, you can refer to the Radix UI Menubar documentation.