[BUG] - Navbar Mobile Menu Can Not Be Opened

[Th3Vladimir]

NextUI Version

2.6.8

Describe the bug

The mobile menu on the navbar cannot be opened. This issue is reproducible on the official documentation site.

Your Example Website or App

https://nextui.org/docs/components/navbar#with-menu

Steps to Reproduce the Bug or Issue

1. Go to NextUI Navbar Documentation.
2. Scroll down to With Menu section.
3. Move the slider, until the "page" navbar displays the hamburger menu (mobile navbar).
4. Attempt to open the navbar menu.

Expected behavior

I expected the mobile menu to open and display the links, but the menu flickers and does not stay open.

Screenshots or Videos

https://github.com/user-attachments/assets/512e8a13-b96d-4440-828d-a310f6afc0bc

Operating System Version

Windows 11, Android 14

Browser

Chrome

[linear[bot]]

ENG-1719 [BUG] - Navbar Mobile Menu Can Not Be Opened

[wingkwong]

From my side, it works fine but i'm using Mac + Chrome tho.

[oliverpechey]

I'm getting the same on Windows 11 and Chrome Version 131.0.6778.109

[wingkwong]

Able to reproduce on Windows with Microsoft Edge.

[ngodacthien]

Mac And Chrome + Safari have same issue. But in mobile Safari dont have.

[newguy123-creator]

I see the same BUG in their own site, and also my own... tried on Windows 10 with both Chrome and Firefox the hamburger menu doesnt open

[newguy123-creator]

Weridly, the Pro version of this works just fine. So not sure why would the Pro version work and the regular one not...

[amigoimmigration]

how to fix any one

[newguy123-creator]

this appears to still not be fixed. Or at least not fully Before, the menu did not open AT ALL now, I have to click the menu 2 times before it opens

[wingkwong]

@macci001 please follow up

[Natanael-Exe]

I fixed it by removing onMenuOpenChange={setIsMenuOpen} from Navbar component and adding the press event handler directly to the NavbarMenuToggle component like this:

<NavbarMenuToggle onPress={() => setIsMenuOpen(!isMenuOpen)} aria-label={isMenuOpen ? "Close menu" : "Open menu"} />

[vaclavkozak]

For me it's not working even after removing onMenuOpenChange from the Navbar. :/ I tries upgrading to 2.6.14, but it still doesn't work.

[newguy123-creator]

For me it's not working even after removing onMenuOpenChange from the Navbar. :/ I tries upgrading to 2.6.14, but it still doesn't work.

yeah fro me its still broken too after the 2 clicks, it opens with 1 click, but only if I dont resize the window. If I resize, then again it needs 2 clicks

[vaclavkozak]

For me it's not working even after removing onMenuOpenChange from the Navbar. :/ I tries upgrading to 2.6.14, but it still doesn't work.

yeah fro me its still broken too after the 2 clicks, it opens with 1 click, but only if I dont resize the window. If I resize, then again it needs 2 clicks

Well, for me it doesn't work at all. Not even after multiple clicks. It just "twitches" on the side of the page and immediately disappears. No error in the console.

[newguy123-creator]

any idea when a fix for this annoying issue is on the way?

[dylanngph]

I fixed it by removing onMenuOpenChange={setIsMenuOpen} from Navbar component and adding the press event handler directly to the NavbarMenuToggle component like this:

<NavbarMenuToggle onPress={() => setIsMenuOpen(!isMenuOpen)} aria-label={isMenuOpen ? "Close menu" : "Open menu"} />

Same issue and fixed if using this. Thanks

[codekappal]

For me the issue was NavbarMenuToggle imported from "@heroui/react", importing using "@heroui/navbar" fixed the issue. May be helpful for someone.

[Kismet333]

I fixed it by removing onMenuOpenChange={setIsMenuOpen} from Navbar component and adding the press event handler directly to the NavbarMenuToggle component like this: <NavbarMenuToggle onPress={() => setIsMenuOpen(!isMenuOpen)} aria-label={isMenuOpen ? "Close menu" : "Open menu"} />

Same issue and fixed if using this. Thanks

I also had this issue on my desktop computer and I was also leveraging onMenuOpenChange={setIsMenuOpen} on my Navbar component. This solution worked for me as well.

Note: Before I implemented this fix I only saw this issue if the height of my window was small enough. When the height of my browser window was big enough the collapsed menu worked fine.

[MorganSnape]

I had the same issue on Windows and Edge. I suspect it's a double-capture event, perhaps detecting both touch and click events as the same.

If I open the developer tools and simulate a mobile touch, it works well. The issue also occurs on the Hero UI document page.

When I select "Desktop, no touch," sometimes it opens, and sometimes it doesn't. I also observe a flicker, as if it opens and closes immediately.

[evereq]

@macci001 any chance to fix this as it seems many people are having issues, and somehow in Pro it's reported to be working...

[Vishvsalvi]

OS: Windows Browser: Edge

Works well on my side

https://github.com/user-attachments/assets/cffdf1df-25ad-4a88-aa05-01dc75ff5c6f

[Vishvsalvi]

https://github.com/user-attachments/assets/5e330e67-713e-4f3f-b40f-b9cb8ee247c0

This one is from Android 14, Chrome

[Vishvsalvi]

Please use the latest version. If the issue still persists, kindly share a reproducible sandbox