[Navigation Block] Submenus in Overlay do not Collapse

[Greatdane]

Description

In a navigation block with a submenu, when selecting Open on click and Always Overlay, the submenu items do not collapse and the open to show an arrow is not selectable. The arrow is also not present.

This behavior continues on the live page. It looks like there is a visibility rule that doesn't get toggled in this view. Here's a workaround with CSS:

.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle[aria-expanded="false"] ~ ul.wp-block-navigation__submenu-container {
    visibility: hidden;
}

Step-by-step reproduction instructions

1) Create navigation block with submenu 2) Select overlay Always and toggle On-click 3) Save, submenus always active, no arrow visible.

Screenshots, screen recording, code snippet

Environment info

WordPress 6.01 Gutenberg 14.1.1

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[carolinan]

Hi! This is the intended behavior of the navigation block. I mean it is intentional that submenus are never collapsed in the overlay, regardless of the block settings.

Perhaps the issue could be rephrased slightly, and be a feature request for the behavior you want the submenus to have?

[antonyjsmith]

The current behaviour makes little sense to me, submenus should be collapsed on mobile the same as Desktop. The setting are confusing since they do not indicate that this setting applies to desktop only. Especially since when using "always" for overlay the submenu "open on click/show arrows" option is still there despite it doing nothing,

[masteradhoc]

+1 on this. currently there's very little love put into the mobile menu...

[gaswirth]

+1 as well. The navigation block is still, as far as I'm concerned, just not ready. Forcing submenus to be always open does not make sense, but even worse, the settings interface doesn't indicate that some options simply don't work with certain combinations, like setting "Overlay" to "Always."

[kathrynwp]

Another report from a user who wishes sub-menus would be collapsed by default on mobile:

https://wordpress.org/support/topic/collapse-sub-menu-on-mobile/

[mgozdis]

+1 Feature requested by user.

[phil-sola]

+1 for this. The mobile navigation out of the box generally needs a lot of work but to leave the sub menu open by default makes no sense to me whatsoever and not something I would do normally on any site i'm building

[retnonindya]

+1 ✨ This is also a feature request. It will be great to have the setting "Open on click" and "Show arrow" consistent with the menu, overlay or not. If the setting is not being applied on Overlay menu, perhaps we can hide/remove the toggle buttons or put an information/tooltip on it? Something like: "The settings below will only apply when Overlay Menu is off" 🤔

[masperber]

+1 on this feature request. It would be great to have the option to have the option to collapse and expand submenus within the overlay menu.

[csabarakasz]

+1 on this feature request in the name of one of our users. They would like submenus to be possible to collapse and uncollapse in mobile devices as well. Thanks.

[Jaccuse]

+1 on this request after speaking with a couple of users who would like to see mobile submenus have a collapsible option, including myself!

[gaswirth]

More than 6 months later, I'm still running into this issue all the time. Just had to hack around it again today. If anyone is interested, I'm happy to share my very simple custom JS I've been reusing to manually add this feature, but if you're here talking about it, my guess it's likely you're already doing something similar 😋

[carolinan]

The best way to share your solution is to create a pull request for the issue in this repository.

[gaswirth]

The best way to share your solution is to create a pull request for the issue in this repository.

Agreed, if my solution weren't just a frontend hack. It doesn't address the block editor -- just a simple bit of JS to allow submenus to collapse when clicked. It's definitely not a real solution.

[tanjoymor]

+1 submenus being auto-collapsed in the overlay menu is a high request of users. Provided the Navigation block is not using the “Page List” block the following CSS does fix it in Block themes:

/* Make mobile menu display sub-menu on hover only  */
@media only screen and (max-width: 599px) {
    .wp-block-navigation.is-responsive li ul.wp-block-navigation__submenu-container  {
        display: none;
    }
    .wp-block-navigation.is-responsive li:hover > ul.wp-block-navigation__submenu-container {
        display: block;
    }
}

But making it a user controlled setting would be ideal. We could introduce it as a setting that needs to be activated, so that it doesn’t automatically impact existing users. But I also think that there is a higher use case of wanting the subitems to auto-collapse and therefore turning it on by default is likely fine, all we need to include is a pop-up notification that informs users of the change and provide a direct jump link to the setting where they can turn it off if desired. That transparency and awareness notification will satisfy most users so that it’s not an unexpected or jarring change.

But this would be a huge improvement in the area of being intuitive. Auto-collapsed mobile menus is far more the norm than the current setup.

[carolinan]

Please consider that hover is a mouse only feature, it does not work on mobile devices or touch screens, so if anyone plans to use this code, you need to be aware that it is not a complete solution.

[tanjoymor]

Please consider that hover is a mouse only feature, it does not work on mobile devices or touch screens, so if anyone plans to use this code, you need to be aware that it is not a complete solution.

Is there an aspect that is perhaps browser or device dependent? Because this did work on Chrome for iPhone the last time I tested it.

[pareshsojitra]

I just fixed this doing some tweak. if anyone looking for this. without blocking main menu link.

I can also share if anyone still looking to this.

I have done this in latest WordPress Theme.

CSS: @media (max-width:599px) { header .wp-block-navigation .wp-block-navigation-item { justify-content: center; } header .wp-block-navigation ul li { width: 100%; } header .wp-block-navigation .wp-block-navigation__submenu-icon { height: auto; width: auto; position: absolute; border: 1px solid #ccc; padding: 3px; right: 0; top: 4px; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container { display: none; width: 100%; } header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon { display: block; } }

jQuery: /* + Document On Ready */ $(document).on("ready", function() { $(".wp-block-navigation-submenu__toggle").on("click", function() { var li = $(this).parent(); if ( li.hasClass("ddl-active") || li.find(".ddl-active").length !== 0 || li.find(".wp-block-navigation-submenu").is(":visible") ) { li.removeClass("ddl-active"); li.children().find(".ddl-active").removeClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideUp(); } else { li.addClass("ddl-active"); li.children(".wp-block-navigation-submenu").slideDown(); } }); });

[pareshsojitra]

Here is how it works without any issue. I hop this considered to be added in WordPress Core ? Anyone can do this how.

https://github.com/WordPress/gutenberg/assets/5764334/70dd7688-dd1c-48da-bf6a-26857683690a

[carolinan]

I don't think using jQuery is the solution that is right for WordPress core.

[pareshsojitra]

Dear Carolina,

Thank you for your response and consideration. I understand the concern regarding the use of jQuery in the WordPress core. I appreciate your dedication to maintaining best practices and accessibility standards.

I would like to further discuss the issue and explore alternative solutions that align more closely with WordPress conventions. If you have any suggestions or specific guidelines that I can follow to address the submenu toggle problem without relying on jQuery, I'm eager to learn and adapt the solution accordingly.

I believe in the collaborative spirit of the WordPress community, and I'm open to feedback and constructive criticism. Let's work together to find the best approach that not only resolves the problem but also adheres to the established standards.

Looking forward to your guidance and input.

[pareshsojitra]

Dear Carolina,

In addition to the submenu toggle issue, I'm also working on improving the mobile menu experience. Specifically, I'm implementing a solution where, in mobile screens, menu items that exceed the screen width will be moved to a "More" menu for better usability.

I've successfully implemented these enhancements in my Bootstrap-based WordPress themes over the past eight years. Now, with the transition to Block Themes, I'm committed to adapting and contributing to ensure a seamless and user-friendly experience.

If you have any specific guidelines or recommendations regarding mobile menu improvements in Block Themes, I'd love to hear them. Your expertise and guidance are invaluable as I navigate this transition.

Thank you for your time and consideration.

https://github.com/WordPress/gutenberg/assets/5764334/f22d9bda-dc46-4748-b833-3ceb5ad04b79

[carolinan]

I am not trying to be dismissive. The only reason why this is not looked at more closely and actively is that many full time contributors are working on other things, changes that are already planned to be part of a WordPress release. Often, things will not move as fast as we wish.

There was a major change to the overlay menu that was planned for WordPress 6.5, that was not completed in time, but that will hopefully be part of WordPress later this year. It does not specifically address collapsing sub menus, it does affect how the overlay menu works: https://github.com/WordPress/gutenberg/issues/43852#issuecomment-1884949063

[pareshsojitra]

Thank you for taking the time to provide further context. I completely understand the challenges of managing contributions and the priorities that full-time contributors have.

I appreciate your insights on the upcoming changes planned for WordPress 6.5, particularly the major change to the overlay menu. While it may not directly address collapsing submenus, I look forward to seeing how it affects the overall user experience.

I understand that the WordPress development process has its pace, and I appreciate the hard work that the team puts into planned releases. If there's any way I can contribute or assist with ongoing efforts, please let me know. I'm eager to collaborate and help ensure a smooth transition for the community.

Thank you for your dedication and for keeping me informed about the ongoing developments.

[annezazu]

As a user, the one thing, I think that is holding back the adoption of block themes is the navigation block, which is why I have been regularly checking for what’s coming in 6.7.

Mobile menus is the only area we have had negative feedback on our transition form a classic to a block theme site.

In the current FSE Navigation Block implementation – submenus on mobile do not collapse, which leads to very very long and ungainly menus. Here is my current menu which is long and unwieldy. See: https://www.decimus.com/wp-content/uploads/2024/10/Mobile_Menu_Block_Ollie.jpg

Pulling this feedback in from the Roadmap to 6.7 post.

[hagege]

I also think that it is time to take a closer look at this issue. The answers in this issue and also discussions with customers show that long submenus are not uncommon and that an option should be added that allows submenus to be expanded or not.