[Feature Request] Close Navbar.Collapse on Navbar.CollapseItem selection

[kingjulien1]

Is your feature request related to a problem? Please describe.

I have Next.js-Links inside the Navbar.CollapseItems inside the Navbar.Collapse element. If I navigated to one of those links, naturally, I want the Navbar.Collapse to close. As of now, it doesn't close automatically.

Describe the solution you'd like

On selection of a Navbar.CollapseItem I'd like the Navbar.Collapse to close again.

Describe alternatives you've considered

I tried to control the Navbar.Collapse with state, but that leads to unforeseen bugs - like if I wanted to set the state to false on the selection of a Navbar.CollapseItem, the navbar closes, however the icon doesn't change and the page is still not interactive due to some sort of overlay still being present.

If there is any other alternative, to accomplish this, I'm all ears.

Screenshots or Videos

No response

[iamalvisng]

+1

[tjkyner]

Would also love to see this implemented!

[Xariwey]

Its not a pretty solution but it works for me at least until the feature gets an official implementation

https://codesandbox.io/s/navbarcollapse-demo-rb8tbk

[brunostyle]

+1

[rpsr15]

+1

[karim-alweheshy]

+1

[5u4]

Its not a pretty solution but it works for me at least until the feature gets an official implementation

codesandbox.io/s/navbarcollapse-demo-rb8tbk

Great solution! However, I noticed the fade in animation is lost after you click the link.

To reproduce:

1. Click toggle (the side menu has animation)
2. Click Menu Link 2
3. Click toggle (the side menu fade in animation is lost)

[Xariwey]

my suggestion would be to disableAnimation in <Navbar.CollapseItem /> its the easy solution, or manually add the transitions but i dont see the point the Navbar component just came out and im sure in the next updates/patchs it will be great

[bxjulien]

Definitely need this :)

[ninja-1337]

+1 Would love to see this implemented.

[snowplowtach]

It's not a pretty solution as well, but here is what I did to close the Navbar.Collapse https://codesandbox.io/s/navbarcollapse-demo-forked-5nfh07.

[Xariwey]

@snowplowtach its a prettier solution, nice one, heres with menu selection and auto select menu based on urlpath

https://codesandbox.io/s/navbarcollapse-demo-rb8tbk

[LOGANLEEE]

Ref! do good work!

[renanlopescoder]

+1 I believe this should be the default behavior

Thanks @snowplowtach your solution looks good

[HugDan]

Esta es la solución que encontré y creo que puede ser la mejor:

...

import {
  Navbar, 
  NavbarBrand, 
  NavbarContent, 
  NavbarItem, 
  Link as Linke, 
  Button,
  NavbarMenuToggle,
  NavbarMenu,
  NavbarMenuItem
} from "@nextui-org/react";

...

 const handleMenuItemClick = (envurl: string) => {
    setIsMenuOpen(false);
    router.push(envurl)
  };

.....

<NavbarMenu>
        {menuItems.map((item, index) => (
          <NavbarMenuItem key={`${item}-${index}`}>
            <Linke
              className="w-full"
              color={
                index === 2 ? "warning" : index === menuItems.length - 1 ? "danger" : "foreground"
              }
              size="lg"
              onClick={() => handleMenuItemClick("/emp")}
            >
              {item}
            </Linke>
          </NavbarMenuItem>
        ))}
      </NavbarMenu>

....

Renombré Link as Linke para poder utilizar sin conflicto import Link from 'next/link' y no recargue la página, quité href de Linke y en handleMenuItemClick, claro, se pasa una variable on la url

[RicardoIA]

I solved this change a reference of link:

import { Link } from "@nextui-org/react";

And added the 'isMenuOpen' parameter to Navbar:

<Navbar
     isMenuOpen={isMenuOpen}
     onMenuOpenChange={setIsMenuOpen}
>

The menu looked like this:

<NavbarMenu className="dark pt-8 text-white">
        {navItems.map((item, index) => (
          <NavbarMenuItem key={index}>
            <Link
              className="w-full"
              href={item.href}
              onClick={() => setIsMenuOpen(false)}
            >
              {item.label}
            </Link>
          </NavbarMenuItem>
        ))}
</NavbarMenu>