megamenu_sdc

A menu system that takes the best practices from Olivero's menu system, and wraps them in Single-Directory Components. Different variations support different front-end libraries and options like Megamenus.

Features

We've had a ton of trouble getting decent menus into current themes, while trying to include features like automatically collapsing to mobile when the horizontal menu starts to wrap, and accessibility around expand/collapse versus following parent links.

This module provides a collection of SDCs (Single Directory Components) that allow you to simply place them on the page and have a working menu. It uses UI Patterns to provide a "MenuContentSource" plugin that makes child links available on megamenus, and Menu Item Extras to optionally allow you to configure megamenu panes using LayoutBuilder (though you can just use this as a normal drop-down menu).

Installation

Install this module as you would any other module, using Composer. You do need to add some Twig blocks to particular templates in your theme to make this all work:

1. Add a block along these lines to your page.html.twig:
   

   <header id="header" role="banner" class="breakout box-content">
         {{ page.header }} {# block region to always be visible #}
       {% embed 'megamenu_sdc:menu_pane' with { menu_id: 'main', height_selector: 'ul.main-height' } %}
         {% block default %}
           {{ page.primary_menu }} {# block region to show first in mobile menu -- but might be placed below secondary menu using grid areas #}
           {{ page.secondary_menu }} {# block region to show second in mobile menu - but might be placed above in desktop using grid areas #}
         {% endblock %}
       {% endembed %}
         {{ page.search }} {# Another block that is always visible in the header #}
     </header>
   

2. Replace the contents of menu_main.html.twig with these contents:
   

   {{ include('freelock_theme:menu_menu', {
     'attributes': attributes,
     items: items,
     menu_name: menu_name,
     menu_level: 0
   }, with_context=false)}}
   

3. Go to the block layout page and place a "MegaMenu Hamburger" where you want the hamburger menu. Add a "menuname-height" CSS class using UI Styles (or another method).
4. Place a "Megamenu Menu" block in a region that is inside the MegaMenu Pane added to your page.html.twig.
5. Set the item source to "Megamenu Content", select the menu you want to use, and save.

This should get you a working menu that is horizontal at desktop widths, and automatically collapses to mobile when it starts to wrap.

Add megamenu functionality

The Menu Item Extras module allows you to add fields to menu content, as well as enable layout builder. This is how we make a megamenu -- by setting a display on the top level menu items.

To enable megamenus:

1. Install Menu Item Extras.
2. Set your main menu to be fieldable
3. Add any fields you want to be able to edit directly on the menu type -- e.g. "description", "action links".
4. Go to the Manage Display tab and enable layout builder, and then use it to create a default layout for the megamenu.
5. Add this code to the menu-link-content.html.twig:
   

   <!-- This is the template for the menu link content entity. -->
   {% embed 'megamenu_sdc:menu_item' with {
     'item': menu_link_content,
     'show_item_link': show_item_link,
     'menu_level': elements['#menu_level'],
     'view_mode': elements['#view_mode'],
     'attributes': attributes,
   } %}
     {%block content%}
       {{content}}
     {%endblock%}
   {% endembed %}
   

6. and copy the stock menu-levels.html.twig from Menu Item Extras into your theme.
7. On the main menu block placement, set Megamenu to true, and the starting level to 1.

You should now have a working megamenu!

To edit a megamenu

1. Open the Structure -> Menu -> (menu-name) page.
2. Edit the top-level menu item you want to change.
3. Click the Layout tab and edit as desired.

Additional Requirements

This project requires Drupal 10.3+, the UI Patterns module, and highly recommends UI Styles.

To create an actual megamenu, you also need Menu Item Extras.

The initial variant is outputting markup compatible with DaisyUI -- and assumes you have this library loaded in your theme. For other markup variations, merge requests are welcome!

Component breakdown

This module includes 4 distinct SDCs:

• MegaMenu Hamburger - a mobile menu icon. You can set CSS variables to affect its look/feel, and it needs a menu pane name that it controls.
• MegaMenu Pane - a wrapper for one or more block regions. Everything in this SDC will get collapsed into the mobile menu. When in desktop, it's largely invisible -- by adding display: contents, your header area can control placement of regions and/or blocks.
• MegaMenu Menu - the actual menu component. If MegaMenu is enabled, it renders the level 1 menu item contents directly. If it's disabled, this is a normal drop-down menu with child links.
• MegaMenu Item - this is used to render the actual megamenu.

Similar projects

We've continually searched for megamenu modules, and have not found any that meet our needs -- and especially not when encapsulated as SDCs. Our design partner keeps giving us designs, so we bit the bullet to come up with a solution we could deploy in an hour or two instead of taking multiple days.