advanced_mega_menu

Advanced Mega Menu provides a powerful, grid-based layout builder for Drupal navigation, enabling site builders to create complex, multi-row, and multi-column layouts through an intuitive visual interface.

Unlike traditional static menus, every element within the mega menu is fully dynamic. By embedding Views, Block entities, and System blocks, the module ensures your navigation renders real-time data that updates automatically as your content changes. These components leverage Drupal’s core visibility system and Views contextual filters, allowing you to serve personalized content based on user roles, page types, or specific URL contexts. Designed for high performance and full responsiveness, it is the definitive choice for enterprise sites requiring a smart, data-driven navigation system.

Features

Core Functionality

This module provides a visual layout engine that transforms standard Drupal menu trees into sophisticated, grid-based navigation. It replaces simple nested lists with a canvas-style interface, allowing administrators to organize content into structured rows and columns directly within the Menu UI.

Unique Features

• Fully Dynamic Content: Embed Views, Block Content entities, and System blocks to render real-time data that updates automatically.
• Contextual Intelligence: Leverage Drupal core visibility and Views contextual filters to personalize content based on user roles, page types, or URL context.
• Hybrid Rendering: Mix traditional menu links with custom blocks. Sub-menu links can be positioned above or below the grid, or hidden entirely.
• Mobile-Ready: Desktop grids automatically convert into touch-friendly vertical accordions.
• Decoupled Support: Built-in REST endpoints allow headless frontends (React, Vue, etc.) to consume complex grid layouts.

Use Cases

• E-commerce: Product categories with a dynamic “Deal of the Day” view.
• Enterprise Portals: Personalized links or recent activity by role.
• Content Publishers: “Trending in this section” via contextual filters.
• Marketing: Promotional banners and CTAs without manual menu edits.

Installation & Setup

1. Installation

Install as you would any contributed Drupal module. See Installing Drupal Modules.

composer require drupal/advanced_mega_menu

Enable the module using Drush:

drush en advanced_mega_menu

2. Permissions

Navigate to People → Permissions (/admin/people/permissions) and grant the Administer Advanced Mega Menu permission to trusted roles.

Configuration Workflow

Step 1: Enable Menu Support

Designate which menus should support Mega Menu functionality.

• Option A: Navigate to Structure → Menus. In the "Operations" dropdown for your chosen menu, select Enable Mega Menu.
• Option B: Go to Structure → Advanced Mega Menu → Configuration. Select multiple menus (e.g., Main, Footer, User) and click Save.

Step 2: Access the Visual Builder

Go to Structure → Menus and edit an enabled menu.

• Hover Interface: Hover over menu links to reveal builder icons.
• Gear Icon: Opens the Layout Builder in an AJAX modal.
• External Link Icon: Opens the full-screen Layout Builder.

Step 3: Architect the Layout

1. The builder uses a hierarchical "Canvas" approach:
2. Add Row: Create a horizontal container. Use Column Width Mode to select predefined layouts (e.g., 2-column, 3-column flex) or choose Custom to apply your own grid classes.
3. Add Column: Divide your row into vertical segments.
4. Add Block: Populate columns with dynamic content. You can embed:
   1. Views Blocks (e.g., Latest News, Product Sliders)
   2. Block Content Entities (e.g., Custom Banners)
   3. System/Theme Blocks (e.g., Search, Site Branding)

Step 4: Display & Visibility

• Display Mode: Choose Mega Only (hides standard sub-menu links) or Menu and Mega (displays both).
• Styling: Assign custom CSS classes to individual rows, columns, or wrappers (e.g., adding row and col-md-6).
• Dynamic Intelligence: Use the block's own visibility settings to show content based on User Roles, Page Types, or Views Contextual Filters.

Advanced Management & Integration

Centralized Dashboard

Manage all your layouts in one place by visiting: Structure → Advanced Mega Menu → Mega Menu Items

Front-End Customization

The module provides dedicated Twig templates. To customize, copy these from the module folder to your active theme:

• menu--advanced-mega-menu.html.twig: The main wrapper template.

Template Override Instructions

1. Enable Debugging: Enable Twig Debug Mode to view template suggestions in your browser's "Inspect Element" tool.
2. Verify Source: Check if the system is currently using menu--advanced-mega-menu.html.twig from the module.
3. Copy & Rename: If the active theme isn't using it, copy that file into your theme's templates folder and rename it to the highest priority suggestion like: menu--primary-menu.html.twig

Developer Controls, Accessibility & API

Provides developers with full control over submenu icons and frontend assets, allowing custom interaction logic and styling while preserving the mega menu structure.
Control & Accessibility

• Configurable Submenu Icons: Enable or disable submenu toggle icons.
• Common or Separate Expand / Collapse Icons: Define same or different icons for expanded and collapsed states to improve usability and accessibility.
• Flexible Icon Sources: Predefined symbols or Custom icon fonts/CSS classes
• Asset Control (JS & CSS): Option to disable the module’s default JavaScript and CSS. Allows developers to implement custom behavior, animations, and styling while continuing to use the Mega Menu’s layout and data structure. These settings can be configured from Structure → Advanced Mega Menu → Configuration.

REST Support

Perfect for decoupled/headless frontends. Access the rendered mega menu HTML via: GET /api/advanced-mega-menu/{menu_id}/{plugin_id}

Additional Requirements

• Drupal core: REST, Block, Views

Recommended Modules

• No external dependencies required

Similar Projects

• WE Mega Menu
• TB Mega Menu

Supporting This Module

• Support via Drupal.org issue queue
• Contributions welcome: code, documentation, testing, or tutorials

Design & Theming Note

Note: This module provides the structural framework and grid engine for your mega menu, but it does not provide a finished design. All content inside mega menu is rendered according to your active theme's styling. You may need to apply custom CSS to match your site’s specific requirements and brand aesthetics.
Additionally, you will need to customize CSS for mobile breakpoints to ensure responsive behavior that aligns with your theme’s mobile menu design.

Troubleshooting

• Menu not showing: Ensure “Enable Mega Menu” is checked on both global and item-level settings
• Top-Level Restriction: Please note that mega menu functionality is designed to work only for top-level menu items.
• CSS classes not applied: Confirm your theme doesn’t override module templates
• Missing blocks: Check permissions and visibility for embedded content
• Template Not Overriding:
  • Enable Debugging: Enable Twig Debug Mode to view template suggestions in your browser's "Inspect Element" tool.
  • Verify Source: Check if the system is currently using menu--advanced-mega-menu.html.twig from the module.
  • Copy & Rename: If the active theme isn't using it, copy that file into your theme's templates folder and rename it to the highest priority suggestion like: menu--primary-menu.html.twig