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.

I like this idea a lot.

One thing that I think we want to consider is that not all sites have just 2 menus (one for desktop, one for mobile). It may be that they have 3 (mobile, tablet, desktop) or it may be that they have either of those scenarios, but different groups of menus for multiple different sections of a site.

I wonder if there's a way to use a Block visibility condition to achieve the multiple blocks showing / hiding.

And definitely, to @ressa's point, I love the idea of documenting how to achieve this somewhere in the module, probably the README.md. And maybe there's even a way to use a recipe to do it all for us.

I have been thinking about this more and I'm convinced the solution is a recipe. The recipe can:

1. Installs Disclosure Menu and Block Breakpoint →
2. Creates a "mobile" menu block that's only shown on smaller screens.
3. Creates a "desktop" menu block that's only shown on larger screens.

We can then link to the recipe from the project page.

Leaving this postponed for now. In the meantime, this thread can serve as the documentation.