Add responsive support, hide items under burger icon in lower resolutions

This functionality is not automated, but it is possible with a little extra work. There is an option to add a button to toggle open the entire menu:

This will give you the functionality of a menu that is hidden by default and opened with a button. To get the seamless effect requested you will also need to:

• Create a duplicate menu block that does not have the "Full menu disclosure" option enabled.
• Add styling to hide the expanded menu block until a desired breakpoint, and hide the collapsed menu block at that breakpoint.

To achieve all of this within a single block would require a submodule that depends on the core Breakpoints module. I have not prioritized this work because "mobile menus" often contains different content than the default menu.

Ah yes, that makes sense. And I do agree that having two different block instances is a perfectly viable solution, since you might want "expand on hover" in Desktop view, but not in Mobile view, and other different configurations for different resolutions.

Would you happen to have a CSS snippet, which hides the expanded menu block until a desired breakpoint, and hides the collapsed menu block at that breakpoint? If we reach something workable here, perhaps it can go into the README? I would think many users would find it useful.

I almost got a rough sketch for responsive working, I'll try to share it here tomorrow.

I found Create a Modern CSS-only Fold-Out Burger Menu and used that as a base for a rough sketch.

Here are the steps, where I used the Claro theme to test:

Create menus, with children

drush devel-generate:menus

Add 2 blocks from the same menu

Disable "Display title" in both.

Desktop block

• Name: Disclosure desktop navigation
• Machine name: disclosure_desktop_navigation
• Enable Menu levels > Expand all menu links
• Enable Javascript settings > Include hover navigation Javascript

Mobile block

• Name: Disclosure mobile navigation
• Machine name: disclosure_mobile_navigation

Twig template

Name: block--disclosure-mobile-navigation.html.twig

CSS

I adjusted some bits of the original CSS, and added some simple CSS at the bottom to make the Desktop block items resemble a menu, some list item style, and media rule.

Or maybe just some copy parts from Olivero?

While looking at this, I also saw that Olivero has a great mobile solution, so perhaps it's worth considering re-using parts of that instead? Or could this simple solution work?

Wouldn't it be great to add responsive support? I hope you have time to review this at some point ...

This a great use-case for this module! Let's move the discussion for default styling options to this ticket [#3401517] ✨ Add styling? Active . The twig override could also be better implemented once there is a separate sub-template for the toggle button per this ticket [#3391087] ✨ Break-up menu template into sub-templates Active .

Great, looking at style in that issue makes sense.

But since the responsive menu relies on ✨ Break-up menu template into sub-templates Active , and there are components in this issue which may be useful, perhaps instead make it a child issue?

+1 for this. I think Olivero missed an opportunity to make it's menu system a separate module so it could plug in to any theme. I'm hoping Disclosure menu can fill that gap.