8000 GitHub - mage2sk/module-mega-menu: Magento 2 MegaMenu module · GitHub
Skip to content
BranchesTags

Repository files navigation

Magento 2 Mega Menu Extension: Drag-and-Drop Builder, CMS Blocks, Sticky Menu and Mobile Drawer (Hyva + Luma)

Magento 2.4.4 - 2.4.8 PHP 8.1 - 8.4 Hyva + Luma Live Demo & Details Packagist Upwork Top Rated Plus Website

Replace Magento's plain top-menu with a fully visual, drag-and-drop mega menu. Panth Mega Menu lets merchants build multi-column dropdowns, inject any CMS block into a column, add icons and images per item, and configure a separate menu for every store view. Native Alpine.js templates for Hyva and vanilla JS templates for Luma are both included. A true mobile off-canvas drawer replaces the desktop dropdown on smaller screens.

Product page: kishansavaliya.com/magento-2-mega-menu.html

Quick Answer

What is Panth Mega Menu? It is a Magento 2 mega menu extension that gives merchants a visual drag-and-drop builder to create multi-level, multi-column navigation. It replaces Magento's default top-menu with a richer navigation block that supports CMS block injection, sticky behavior, a mobile off-canvas drawer, per-store-view scoping, and FPC-aware caching.

What does it add to my store?

  • A drag-and-drop menu builder in the admin where you add, nest, and reorder items without writing code.
  • Multi-column dropdown layouts with category links, CMS pages, custom URLs, and CMS block injection per column.
  • A sticky menu option that keeps the navigation fixed while visitors scroll.
  • A mobile off-canvas drawer with accordion sub-menus, swipe gesture support, and an overlay backdrop.
  • Per-store-view menus so each store view can show different navigation.

Which themes are supported? Both Hyva (Alpine.js, no jQuery) and Luma (vanilla JS). The module auto-detects the active theme and loads the correct template.

What does it need? Magento 2.4.4 to 2.4.8, PHP 8.1 to 8.4, and the free mage2kishan/module-core package.

🚀 Need Custom Magento 2 Development?

Get a free quote for your project in 24 hours for custom modules, Hyva themes, performance work, M1 to M2 migrations, and Adobe Commerce Cloud.

Get a Free Quote

🏆 Kishan Savaliya

Top Rated Plus on Upwork

Hire on Upwork

100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist

🏢 Panth Infotech Agency

Magento Development Team

Visit Agency

Custom Modules • Theme Design • Migrations Performance • SEO • Adobe Commerce Cloud

Visit our website: kishansavaliya.com  |  Get a quote: kishansavaliya.com/get-quote

Table of Contents

Who Is It For

  • Stores with wide catalogs where shoppers need quick access to many categories. A multi-column dropdown brings everything one hover away.
  • Fashion, electronics, and home stores that want to show category images, icons, or a promo banner inside a dropdown column.
  • Hyva storefronts that need a mega menu built on Alpine.js, with no jQuery reintroduced.
  • Multi-store Magento setups where each store view needs its own navigation structure.
  • Merchants who manage their own store and want to update menu items through a visual admin interface without involving a developer.

Key Features

Drag-and-Drop Menu Builder

  • Visual tree editor in the admin to add, nest, and reorder items with drag handles.
  • Multiple item types in one tree: category links, CMS page links, custom URLs, label-only parent items, and raw HTML items.
  • Unlimited nesting depth for as many sub-levels as you need.
  • Per-item properties including title, URL, icon class, image upload, CSS class, link target, and tooltip text.
  • Bulk JSON import and export to move menus between environments or keep a backup.
  • Version history so you can restore an earlier menu snapshot.

Multi-Column Dropdown Layouts

  • 1 to 4 columns (configurable per item) for the classic mega-menu look.
  • CMS block injection inside any column, perfect for promo banners or featured product HTML.
  • Category images and icons shown inside dropdown panels when enabled.
  • Show or hide product count next to each category name.

Sticky Menu

  • Optional sticky behavior that pins the menu to the top of the viewport as the visitor scrolls.
  • Configurable scroll offset before the sticky state activates.
  • Hide on scroll down, show on scroll up to keep the menu out of the way when reading.
  • Compact mode for a reduced-height sticky bar, with an optional drop shadow for visual depth.

Mobile Off-Canvas Drawer

  • True off-canvas drawer that slides in from the left (or right), not a shrunk desktop dropdown.
  • Accordion sub-menus so visitors tap to expand nested levels.
  • Swipe gesture support to open and close with a swipe.
  • Semi-transparent overlay behind the open drawer.
  • Configurable breakpoint (default 1024 px) to control when the drawer replaces the desktop menu.

Hyva and Luma Templates

  • Native Hyva template built on Alpine.js and Tailwind utilities, with no jQuery, Knockout, or RequireJS.
  • Native Luma template using vanilla JS only, with no RequireJS dependency on the critical path.
  • Theme auto-detection via Panth_Core so the right template loads without manual configuration.

Display and Styling Controls

  • Hover effect selector (underline, fade, slide, zoom, glow, none) per item.
  • Animation type for dropdown open and close (fade and others).
  • Configurable animation duration and hover-intent delay.
  • Custom CSS field in admin for per-menu overrides without touching files.
  • Custom JavaScript field for advanced hooks.

Per-Store Configuration

  • Store-view scoped menus stored in the panth_megamenu_store relation table.
  • Customer-group scoping for menus visible only to specific groups (stored in panth_megamenu_customer_group).
  • Role-based ACL with separate admin resources for view, edit, and delete.

Performance and Reliability

  • FPC-aware caching with cms_b and cat_c cache tags so the menu invalidates automatically when a referenced block or category changes.
  • Database-level render cache in panth_megamenu_cache, keyed by menu, store, and customer group.
  • Single DB query to load the full menu tree.
  • MEQP-compliant code with constructor injection only and zero ObjectManager usage.
  • Translation ready, every label uses Magento's __() function.
  • Full keyboard navigation with arrow keys, Enter, Escape, and ARIA roles for screen readers.

Compatibility

Requirement Versions Supported
Magento Open Source 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce 2.4.4, 2.4.5, 2.4.6, 2.4.7, 2.4.8
Adobe Commerce Cloud 2.4.4 to 2.4.8
PHP 8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme 1.0+ (native Alpine.js support)
Luma Theme Native support (vanilla JS)
MySQL 8.0+
MariaDB 10.4+
Required Dependency mage2kishan/module-core (free, auto-installed by Composer)

Installation

Composer Installation (Recommended)

composer require mage2kishan/module-mega-menu
bin/magento module:enable Panth_Core Panth_MegaMenu
bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f
bin/magento cache:flush

Manual Installation via ZIP

  1. Download the latest release from Packagist or from the product page.
  2. Extract it to app/code/Panth/MegaMenu/ in your Magento install.
  3. Make sure Panth_Core is installed too (required dependency).
  4. Run the commands above starting from bin/magento module:enable.

Verify Installation

bin/magento module:status Panth_MegaMenu
# Expected: Module is enabled

After install, open:

Admin -> Panth Extensions -> Mega Menu -> Menu Items
Admin -> Stores -> Configuration -> Panth Extensions -> MegaMenu

Configuration

Go to Stores -> Configuration -> Panth Extensions -> MegaMenu.

All settings support the standard Magento scope hierarchy: default, website, and store view.

General Settings

Setting Default Description
Enable MegaMenu Yes Master toggle. When disabled, Magento's default top-menu is used.
Menu Identifier mainmenu The identifier of the menu to display on the frontend.
Mobile Breakpoint (px) 1024 Screen width below which the off-canvas drawer replaces the desktop dropdown.
Enable Sticky Menu No Pins the menu to the top of the viewport while the visitor scrolls.

Styling Settings

Setting Default Description
Hover Effect Underline Visual effect on menu items on hover (underline, fade, slide, zoom, glow, none).
Image Size thumbnail Image size preset for category images in dropdown panels.
Custom CSS (empty) Extra CSS rules applied to the menu. No <style> tags needed.

Display Settings

Setting Default Description
Animation Type Fade Animation used when opening and closing dropdowns.
Animation Duration (ms) 200 Duration of the dropdown animation.
Hover Intent Delay (ms) 150 Delay before a dropdown opens on hover, to avoid accidental opens.
Show Icons Yes Display item icons when available.
Show Images Yes Display category images in dropdown panels.
Maximum Menu Depth 5 Maximum nesting depth rendered on the frontend.
Columns 4 Default number of columns in the mega dropdown layout.
Show Category Product Count No Show the number of products next to each category name.
Enable Custom Blocks Yes Allow CMS blocks to be embedded inside dropdown columns.

Mobile Settings

Setting Default Description
Enable Mobile Menu Yes Enables the off-canvas mobile drawer.
Mobile Menu Position Left Slide-in direction for the drawer panel (left or right).
Show Overlay Yes Semi-transparent backdrop shown when the drawer is open.
Accordion Style Yes Expand and collapse sub-menus accordion-style on mobile.
Enable Swipe Gestures No Allow swipe gestures to open and close the drawer.
Animation Speed (ms) 300 Mobile drawer open and close animation speed.
Show Category Icons Yes Display category icons in the mobile drawer.

Sticky Menu Settings

These settings apply only when Sticky Menu is enabled in General Settings.

Setting Default Description
Sticky Offset (px) 100 Scroll distance before sticky mode activates.
Hide on Scroll Down No Hide the sticky menu when the visitor scrolls down.
Show on Scroll Up Yes Reveal the sticky menu when the visitor scrolls up.
Show Shadow Yes Drop shadow beneath the sticky menu bar.
Compact Mode No Reduced-height layout when the menu is sticky.
Animation Speed (ms) 300 Sticky menu show and hide animation speed.

Performance Settings

Setting Default Description
Enable Menu Cache Yes Cache rendered menu HTML for improved performance.
Cache Lifetime (seconds) 3600 How long the cache entry is kept before it expires (1 hour).
Lazy Load Dropdowns No Load dropdown content on demand rather than at page load.

Advanced Settings

Setting Default Description
Enable Debug Mode No Log debug information for troubleshooting. Disable in production.
Custom JavaScript (empty) Extra JS added to the menu component. No <script> tags needed.

Menu Builder Guide

Open Admin -> Panth Extensions -> Mega Menu -> Menu Items.

  1. Create a menu and give it an identifier (e.g., mainmenu). Assign it to one or more store views.
  2. Add items by clicking Add Item and choosing the type: category link, CMS page link, custom URL, label-only parent, or raw HTML.
  3. Drag to reorder using the drag handle to nest and rearrange items in the tree.
  4. Set columns on each parent item to choose how many columns (1 to 4) its dropdown uses.
  5. Inject CMS blocks by assigning a CMS block to a column for banners, featured products, or custom HTML.
  6. Add icons or images by uploading an image or entering an icon-font class per item.
  7. Save, and the module flushes the relevant cache entries automatically.

The version history table records every save so you can restore an earlier snapshot if needed.

How It Works

  1. When the module is enabled, it reads the Menu Identifier from configuration and loads the matching menu record from panth_megamenu_menu.
  2. Menu items are fetched from panth_megamenu_item in a single query, resolved by hierarchy level and position.
  3. The rendered HTML is stored in panth_megamenu_cache keyed by menu, store view, and customer group, so repeat page loads skip the build step entirely.
  4. On the frontend, Hyva stores get the Alpine.js template and Luma stores get the vanilla JS template. The module reads the active theme through Panth_Core and picks the right one.
  5. The desktop dropdown shows multi-column layouts with optional CMS block content. Below the configured breakpoint, an off-canvas drawer takes over with accordion sub-menus.
  6. When a referenced category or CMS block is saved in the admin, Magento fires the cat_c or cms_b cache tags, which invalidates the relevant menu cache entries automatically.

FAQ

Does Panth Mega Menu work on both Hyva and Luma?

Yes. The module ships two separate templates. Hyva stores get Alpine.js plus Tailwind utilities, Luma stores get vanilla JS. The module picks the right one based on your active theme, so no manual configuration is needed.

Can I build a menu without touching code?

Yes. The drag-and-drop builder in Admin -> Panth Extensions -> Mega Menu -> Menu Items lets you add, nest, and reorder items visually. You can also set column counts, inject CMS blocks, and upload images per item, all from the admin.

Can I show a promo banner inside a dropdown?

Yes. Enable the CMS block option on a column and assign any existing CMS block. The block renders lazily when the column is opened, keeping the initial page load fast.

Does it support different menus per store view?

Yes. Each menu is assigned to one or more store views through the panth_megamenu_store relation. You can have a completely different navigation structure per store view.

Will it slow down my store?

No. Menu HTML is cached in a dedicated database cache table keyed by menu, store, and customer group, and is served without rebuilding the tree on each request. Cache entries are invalidated automatically when a referenced category or CMS block changes.

Does the sticky menu work on Hyva?

Yes. The sticky menu behavior is available on both Hyva and Luma. Configure the scroll offset, hide/show on scroll direction, compact mode, and animation speed in the Sticky Menu Settings group.

Does it support keyboard navigation and screen readers?

Yes. The module is fully keyboard navigable with arrow keys, Enter, and Escape, and includes ARIA roles and labels throughout for screen reader compatibility.

Can I restore a menu to an earlier version?

Yes. The module records a version history in panth_megamenu_menu_version. Each time you save a menu, a snapshot is stored and you can restore it from the version list in the admin.

Does Panth Mega Menu need Panth Core?

Yes. mage2kishan/module-core is a free, required dependency that Composer installs automatically. It provides theme detection and shared utilities used by all Panth modules.

Support

Channel Contact
Product Page kishansavaliya.com/magento-2-mega-menu.html
Email kishansavaliyakb@gmail.com
Website kishansavaliya.com
WhatsApp +91 84012 70422
GitHub Issues github.com/mage2sk/module-mega-menu/issues
Upwork (Top Rated Plus) Hire Kishan Savaliya
Upwork Agency Panth Infotech

Response time: 1-2 business days.

💼 Need Custom Magento Development?

Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:

Get a Free Quote

Hire on Upwork    Visit Agency    View Product Page

About Panth Infotech

Built and maintained by Kishan Savaliya (kishansavaliya.com), a Top Rated Plus Magento developer on Upwork with 10+ years of eCommerce experience.

Panth Infotech is a Magento 2 development agency that builds high quality, security focused extensions and themes for both Hyva and Luma storefronts. The extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management, with each module built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on our Magento extensions page or on Packagist.

Quick Links

Resource Link
🛒 Product Page magento-2-mega-menu.html
📦 Packagist mage2kishan/module-mega-menu
🐙 GitHub mage2sk/module-mega-menu
🌐 Website kishansavaliya.com
💬 Free Quote kishansavaliya.com/get-quote
👨‍💻 Upwork (Top Rated Plus) Hire Kishan Savaliya
🏢 Upwork Agency Panth Infotech
📧 Email kishansavaliyakb@gmail.com
📱 WhatsApp +91 84012 70422

Ready to give your store a better navigation experience?
See Mega Menu

SEO Keywords: magento 2 mega menu, magento 2 mega menu extension, magento 2 mega menu module, magento 2 navigation menu, magento 2 dropdown menu, magento 2 multi-column dropdown, hyva mega menu, hyva mega menu extension, luma mega menu, magento 2 mobile menu, magento 2 off-canvas menu, magento 2 mobile drawer, magento 2 drag and drop menu builder, magento 2 cms block menu, magento 2 sticky menu, magento 2 menu builder, alpine.js mega menu, magento 2 mega menu alpine, magento 2.4.8 mega menu, php 8.4 mega menu, mage2kishan mega menu, panth mega menu, panth infotech, hire magento developer, top rated plus upwork, kishan savaliya magento, custom magento development, magento 2 menu with images, magento 2 category mega menu, magento 2 store view menu

About

Magento 2 MegaMenu module

Resources

Readme
Activity
Custom properties

Stars

1 star

Watchers

0 watching

Forks

1 fork
Report repository

Releases

Packages

Contributors

Languages

0