[NavigationMenu] Menu should close when navigating to a `Link`

Feature request

Overview

Add open state to NavigationMenu.Root so we can override opening/closing states for use with external lib (e.g. Framer Motion).

Same functionality as found in Collapsible, DropdownMenu, Dialog, etc.

Edit: There’s also no way of closing the menu when navigation between pages in a Next.js app and the menu stays open (located in global layout outside page content)

Thank you!

[samburgers]

thanks for this! i implemented a slight change to @andy-hook example, hooking into route changes rather than click events - meaning it should catch things like browser fwd/back buttons and keyboard shortcuts etc too

  const [value, setValue] = React.useState("");
  const { asPath } = useRouter();

  React.useEffect(() => {
    setValue("");
  }, [asPath]);

https://codesandbox.io/s/mystifying-germain-mlb900?file=/pages/_app.js

[andy-hook]

I could not find anything in the documentation regarding closing. Not sure if this the intended behavior and that I have to implement something for this.

@weskor This should be being handled for you out of the box to be honest so seems like an oversight on our part.

We’ll raise a fix soon but in the meantime you can control the value yourself and set it to an empty string in order to close the menu manually

https://codesandbox.io/s/distracted-gwen-domugj?file=/pages/_app.js

Hope this helps 🙏