Simple Mega Menu

Simple Mega Menu module provide a easy way to build mega menu. This module does not attempt to generate a finished mega menu, which can then be difficult to customize. Instead it provides some fondations to build easily a mega menu with Twig and some content entities.

If you're looking for a plug and play solution, this is not the module for you. But if you're looking for an easy way to place custom content (link, image, text, etc.) inside a menu, this module could be for you.

Currently, a simple mega menu entity can only be selected from a menu link content (a menu link created manually). Menu link items created by modules can't be supported for now. Waiting #2656534: Provide a way to extract a menu plugin from a menu form

How it works

This module provides a new content entity type, Simple MegaMenu. These entities can be managed as the node entity type : Create bundle, add view mode, add fields, customize display, etc. For each bundle created, you have to specify on which menu this bundle will be available.

You can then reference, from each Menu link content item, any entities available for this bundle.

Foreach menu that has been set on a Simple Mega Menu bundle, this module overrides the default template twig menu.html.twig with a template menu--simple-megamenu.html.twig similar but with some new Twig functions used as a default / starting template.

The simple MegaMenu entity attached to an item is then rendered from the Twig template provided by the module. To achieve this, two new Twig functions are available :

• view_megamenu(Url $url, 'view_mode') : this function allows to render the simple MegaMenu entity attached to an item url, in any view mode needed.
• has_megamenu(Url $url) : this function allows you to check if an item has a Simple MegaMenu entity attached to it.

You can then easily customize how your megamenu looks like by overriding the Twig template in your theme.

By default, the module provide two view modes for the simple mega menu entity type : Before and After

The default template use theses two view modes

{# File menu--simple-megamenu.html.twig #}
{{ attach_library('simple_megamenu/base') }}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('menu', 'menu--simple-mega-menu') }}>
    {% else %}
      <ul {{ attributes.removeClass('menu--simple-mega-menu') }}>
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if item.below %}
          {% if has_megamenu(item.url) %}
            <div class="mega-menu-wrapper">
              {{ view_megamenu(item.url, 'before') }}
              {{ menus.menu_links(item.below, attributes.addClass('mega-menu-item'), menu_level + 1) }}
              {{ view_megamenu(item.url, 'after') }}
            </div>
          {% else %}
            {{ menus.menu_links(item.below, attributes.removeClass('mega-menu-item'), menu_level + 1) }}
          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

You can then easily update your custom template and use any custom view mode you want, to feet your needs. And you can too render entities attached where you want.

Simple MegaMenu entities are translatable and revisionable and play nice with a mutlilingual site.

Styling

Simple Mega Menu provide basic styling. You can override the library (css/js) provided by this module simply by adding theses lines into your theme file my_theme.info.yml

libraries-override:
  # Replace an entire library.
  simple_megamenu/base: my_theme/megamenu

where my_theme/megamenu is your own library. See the Drupal 8 Theming documentation for further details.

Documentation

A blog post explain how to create a mega menu with this module.