[ Navigation Block ] Make it Mobile Responsive

[munirkamal]

Hi,

I am using Navigation Block for creating Header Templates. I know it is still a WIP, just want to raise an issue that it is not mobile responsive yet.

From mobile responsive I mean to convert the menu items in a menu toggle icon for mobile screen sizes.

Is this something already in consideration?

Cheers.

[annezazu]

@munirkamal thanks for reporting this and sharing! Right now, work is in progress to improve responsiveness here: #22497

Does this cover what you were hoping to see? If so, please close this out so we can focus efforts there. If not, definitely share more of what you'd like to see and know that the people working on this are doing their best to create a responsive experience.

[munirkamal]

@annezazu

Thank you for reviewing this. I've checked the issue #22497 and that is not what this issue is about. That issue is to make the menu editing experience responsive.

In this issue, I want to raise it to devs attention that the menu itself is not responsive on the front-end.

By Responsive I mean to make the menu items enclosed inside a menu toggle for mobile devices.

For example here are the screenshots of a simple header template I have created.

Desktop:

Mobile:

Now for the mobile, I wish the menu block should be responsive and work something like this.

Do you get my point? Right now in the gif above I implemented it with a little JS and inserting the icon/div in an HTML block.

let me know if you need more info.

[annezazu]

@munirkamal thanks for this GIF and further explanation - makes perfect sense. I've added this to the project board so the people working on this can take a look.

[munirkamal]

@annezazu

Great 👍

[jasmussen]

Here's a rough outline for what we could start with —

Make a toggle on the Navigation block that defaults to collapsing to a menu on mobile.

On mobile, with the navigation block unselected, you see the burger icon.

Tap to edit. When you are editing (navigation block is-selected or has-child-selected), the block itself gets the same treatment as the modal dialog on the frontend. Click outside to deselect the block, and collapse the menu.

On the frontend it works: on mobile (f.ex. we <480px), you see the burger icon:

Click it and a modal dialog opens, trapping tabs, and Esc or or the close icon closes the menu:

We could potentially use Micromodal for the dialog behavior, and this same behavior would benefit the burger menu whether it was a small dropdown, a fullscreen modal, an overlay sidebar, or most things in between.

It seems feasible to be able to offer both fullscreen modal menus, sidebar overlays, and inline dropdowns using the same markup and CSS only, as position: fixed; breaks out of any ancestors that apply position: relative;, therefore those three styles could simply be style variations.

[mtias]

Lovely. I think it might be worth allowing to both have an icon to trigger (default), but also the option of a text button (like "Menu"). Perhaps rather than text it's an actual Button block with all its customization settings and some good defaults?

[jasmussen]

I'll think about the best way to let you edit and configure such a button in the flow from both the desktop and mobile breakpoints, seems like we might need to show it on-select at both.

[mtias]

I think we can keep it just on the context it's actually shown. Another thing I think we really need to do is to allow the button -> overlay to also work on desktop as an option.

[vcanales]

Closed by #30047
Follow in #31765