Improved mobile navigation layout

[curiousduck-dev]

What problem does this address?

The navigation block is probably one of the fastest evolving blocks in Gutenberg and it's certainly come a long way. However, in its current form each navigation is siloed, with no ability to interconnect different navigations. For example, each navigation block comes with settings for mobile navigation - whether it be disabled entirely, activated at breakpoint, or always active. If - as is often the case for a great many websites - a header template part contains multiple navigation blocks the current setup results in an ugly mobile state of two separate hamburger icons with two separate mobile navigations.

What is your proposed solution?

It would be brilliant if some interconnectivity could be established between navigation blocks. In this example, having the ability to add the top navigation block's link list to the main navigation block's mobile navigation would fix the above issue, along with an additional "hide on mobile" setting for the mobile navigation options. That way, on mobile sizes, users could hide the top navigation altogether (removing that ugly second hamburger) and display its link list as part of the main navigation's mobile menu, creating a cleaner UX.

Here's a screenshot of how things work current on desktop and then on mobile:

[paaljoachim]

I will add in this States issue which brings up among other things responsiveness.
#57719

[eric-michel]

I posted a similar issue last year regarding similar issues with the Navigation block. It feels extremely restrictive in its current form, and navigation is one of the most tailored pieces of many websites.

The Navigation block desperately needs ways to significantly change its output. I have achieves a very nice mobile flyout menu outside of the Navigation block, but it required a lot of workarounds.

[getdave]

I agree this situation is sub-optimal. I created this Plugin to provide a workaround.

However, we could dispense with it entirely if something like block visibility was added to Core.