How to create a responsive menu
For responsive support, you usually move menu items under a burger icon in the right hand side, like for example Bootstrap does, under smaller resolutions. Examples:
- https://schnerring.net/blog/create-a-modern-css-only-fold-out-burger-menu/
- https://getbootstrap.com/docs/5.0/components/navbar/
Creating a responsive solution
This functionality is not automated in Disclosure Menu, 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.
A solution could eventually be created as a recipe, and linked to from the project page:
- Installs Disclosure Menu and Block Breakpoint.
- Creates a "mobile" menu block that's only shown on smaller screens.
- Creates a "desktop" menu block that's only shown on larger screens.
From #3401640-13: Add responsive support, hide items under burger icon in lower resolutions.
Building a responsive menu
Until a recipe is available, here are the steps to build a responsive menu, switching automatically between offering either a Desktop or a fold-out burger menu. The rough sketch below is based on Create a Modern CSS-only Fold-Out Burger Menu.
Here are the steps, where the Claro theme is used:
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
Some bits of the original CSS were adjusted, and some simple CSS added at the bottom to make the Desktop block items resemble a menu, some list item style, and media rule.
Twig and CSS files
| new | block--disclosure-mobile-navigation.html_.twig_.txt | 2.92 KB |
| new | disclosure-mobile-navigation.css_.txt | 2.47 KB |
Origin: #3401640-6: Add responsive support, hide items under burger icon in lower resolutions.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion
