What's new
kishansavaliyakb@gmail.com
Chat on WhatsApp
Toggle Nav
My Cart
Mega Menu for Magento 2 — Multi-Level Dropdown Navigation

Mega Menu for Magento 2 — Multi-Level Dropdown Navigation

Advanced multi-level dropdown mega menu for Magento 2 — a visual drag-and-drop builder that lets merchants craft rich navigation with category links, CMS pages, and custom URLs.

Magento 2.4.6–2.4.8 PHP 8.1–8.4 Hyva + Luma Ready Free

Key Features:

  • Multi-Level Dropdown Menu
  • Drag-and-Drop Menu Builder
  • CMS Block Injection
  • Mobile Responsive

Additional Services

$0.00
In stock
SKU
panth-mega-menu
Links
Pay with Wise
Lifetime Updates Every Magento release
1-Year Free Support Email + WhatsApp
Adobe-Certified Magento 2 Developer
Free Forever No subscription, no upsell
What you get

Everything in the box

Built-in from day one. No add-ons, no upsell, no licence keys to renew.

Multi-Level Dropdown Menu

Unlimited depth — build two-, three-, or four-level cascading dropdowns with no hard limits

Drag-and-Drop Menu Builder

Bulk import / export — export the menu tree as JSON, edit externally, re-import

CMS Block Injection

Drop any CMS block into a dropdown column — perfect for promo banners, featured products, or custom HTML

Mobile Responsive

True mobile drawer — slides in from the left with smooth animations, not a shrunk desktop dropdown

Alpine.js for Hyva

Native Hyva template — Tailwind utilities + Alpine.js, no jQuery, no Knockout, no RequireJS

Luma Support

Vanilla JS template — zero jQuery / RequireJS coupling on the frontend path

Overview

Panth Mega Menu is a multi-level dropdown navigation extension for Magento 2 and Adobe Commerce that replaces the default top-menu with a drag-and-drop, conversion-focused mega menu.

Merchants build unlimited-depth menus visually with a tree editor, inject any CMS block into a dropdown column for promo banners or featured products, attach icons or images per item, and configure different menus per store view. Dynamic style controls tune color, spacing, hover delay, animation duration, and column widths per menu — without touching CSS.

The mega menu auto-detects Hyvä (Alpine.js plus Tailwind, smooth micro-interactions) and Luma (zero-dependency vanilla JS). A true mobile drawer replaces the desktop dropdown below a configurable breakpoint, with large touch targets and accordion-style sub-menus. The frontend is Full-Page-Cache aware, keyboard-navigable, ARIA-compliant, and ships with zero ObjectManager usage, following MEQP standards.

Compatible with Magento 2.4.4–2.4.9 and PHP 8.1–8.4, the extension is translation-ready, multi-store aware, and works alongside category, CMS, and custom URL nodes inside a single menu tree.

Best for:

  • Magento 2 merchants whose category tree is too deep for the default top-menu.
  • Multi-store catalogs that need different navigation per store view or locale.
  • Hyvä storefronts that need a fast, animated mega menu without bundled jQuery.

Why Panth Mega Menu

Other mega menu extensions Panth Mega Menu
Theme support Usually Luma OR Hyva only Both — same module, two purpose-built templates
Mobile UX Desktop dropdown shrunk True mobile drawer with smooth animations
CMS block injection per column Often missing Yes — drop any CMS block into any column
Drag-and-drop tree builder Rare Yes — visual editor in admin
Per-store-view menus Sometimes Yes
Alpine.js on Hyva Rarely native Yes — no jQuery, no Knockout
Dynamic per-menu styles Rare Yes — colour + spacing tokens
FPC-aware caching Rare Yes — proper cache tag invalidation
Uses ObjectManager? Often Never — full constructor injection

What you get

Panth Mega Menu delivers a modern navigation system for Magento 2:

  • Drag-and-drop tree editor with unlimited-depth menus and per-item icons or images.
  • CMS block injection into dropdown columns for promo banners and featured products.
  • Dynamic per-menu style controls for color, spacing, hover delay, and column widths.
  • Mobile drawer with accordion sub-menus and large touch targets below a configurable breakpoint.
  • Hyvä (Alpine.js) and Luma (vanilla JS) templates with FPC awareness and ARIA support.

Key Features

Multi-Level Dropdown Menu

  • Unlimited depth — build two-, three-, or four-level cascading dropdowns with no hard limits
  • Multi-column layouts — choose 1, 2, 3, or 4 columns per parent item for classic mega-menu presentation
  • Rich item types — category links, CMS page links, manual URLs, and external links in a single tree
  • Per-item images and icons — upload images or embed SVG / icon-font classes per menu item
  • Custom CSS class and target — full control over rendering and link behaviour

Drag-and-Drop Menu Builder

  • Visual tree editor in the admin — reorder, nest, and edit items without writing code
  • Live preview of the menu structure as you build
  • Bulk import / export — export the menu tree as JSON, edit externally, re-import
  • Copy from another store view — duplicate an existing menu into a new store view with one click
  • Conditional visibility — show items to specific customer groups, store views, or date ranges

CMS Block Injection

  • Drop any CMS block into a dropdown column — perfect for promo banners, featured products, or custom HTML
  • Lazy rendering — CMS blocks in dropdown columns render only when the column opens
  • Cache-tagged — CMS block updates invalidate the menu automatically via standard cms_b tags

Mobile Responsive

  • True mobile drawer — slides in from the left with smooth animations, not a shrunk desktop dropdown
  • Configurable breakpoint — default 1024px, adjustable per store view
  • Accordion sub-menus — tap to expand nested items
  • Big touch targets — optimized tap zones for thumb navigation

Alpine.js for Hyva

  • Native Hyva template — Tailwind utilities + Alpine.js, no jQuery, no Knockout, no RequireJS
  • Ultra-light JS footprint — animations and state managed by Alpine directives only
  • SSR-friendly HTML — fully functional without JavaScript for search engines

Luma Support

  • Vanilla JS template — zero jQuery / RequireJS coupling on the frontend path
  • Respects Luma layout breakpoints — integrates cleanly with existing Luma themes

Dynamic Styles

  • Per-menu colour controls — text, background, hover, border tokens editable in admin
  • Hover-intent tuning — configurable hover delay so dropdowns don't flicker on accidental mouse-overs
  • Animation duration control — CSS transition timing for open and close
  • No CLS — fixed-height menu container so dropdowns never push layout

Per-Store Configuration

  • Store-view scoped menus — every store view can have its own menu tree
  • Scope-aware settings — enable/disable, breakpoint, hover delay configurable per store view
  • Role-based admin access — separate ACL resources for view, edit, and delete

Performance & SEO

  • FPC-aware caching — menu HTML is served from Full-Page-Cache and invalidated by cms_b / cat_c tags
  • Single DB query to load the entire menu tree (EAV joins resolved in one shot)
  • Keyboard navigable — arrow keys, Enter, Escape, full ARIA attributes
  • MEQP compliant — zero ObjectManager usage, full constructor injection

Menu Builder Guide

Open Stores → Panth Infotech → Mega Menu → Menu Builder.

  1. Add items — click Add Item and pick a type (category, CMS page, custom URL, or label-only parent)
  2. Drag to reorder — use the drag handle to nest and reorder the tree
  3. Configure columns — for each parent item, choose 1-4 column dropdown layout
  4. Inject CMS blocks — drop any CMS block into a column for banners, featured products, or custom HTML
  5. Add icons / images — upload per-item images or use SVG / icon-font classes
  6. Style it — set per-menu colours, hover behaviour, and animation timings
  7. Save — Magento cache flushes automatically for the affected store views

Frontend Templates

The module auto-detects your active theme and switches templates accordingly:

  • Hyva theme active → view/frontend/templates/menu.hyva.phtml (Alpine.js + Tailwind)
  • Luma theme active → view/frontend/templates/menu.luma.phtml (vanilla JS)

Both templates share the same menu data provider, so admins see a consistent builder regardless of frontend theme.

Quick Links

Ready to upgrade your Magento 2 navigation?

SEO Keywords: magento 2 mega menu, multi-level menu, mega navigation, hyva mega menu, alpine.js menu, dropdown menu, magento 2 navigation, magento 2 mobile menu, magento drag and drop menu builder, magento category menu, magento cms block menu, magento mega menu extension, magento 2 multi-column dropdown, magento 2.4.8 menu, php 8.4 magento module, hyva alpine.js menu, luma mega menu, magento responsive menu, magento 2 navigation menu, magento mobile drawer, magento store view menu, magento 2 fpc menu, magento 2 keyboard navigation menu, magento aria menu, magento 2 seo navigation, panth mega menu, panth infotech, kishan savaliya magento, top rated plus magento freelancer, mage2kishan, mage2sk, custom magento development, magento 2 hyva development, magento 2 performance optimization, magento marketplace extension

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 — 2.4.8
PHP 8.1.x, 8.2.x, 8.3.x, 8.4.x
Hyva Theme 1.0+ (Alpine.js + Tailwind template)
Luma Theme Native support (vanilla JS template)
MySQL 8.0+
MariaDB 10.4+
Required dependency mage2kishan/module-core (free, auto-installed)

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 extension ZIP from Packagist or the Adobe Commerce Marketplace
  2. Extract to app/code/Panth/MegaMenu/ in your Magento installation
  3. Ensure app/code/Panth/Core/ is also installed (free base module)
  4. Run the same commands above starting from bin/magento module:enable

Verify Installation

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

Configuration

Navigate to Stores → Configuration → Panth Extensions → Mega Menu.

Setting Default Description
Enable Module Yes Master kill switch for the mega menu
Replace Native Menu Yes Hides Magento's default top-menu and renders the Panth menu
Mobile Breakpoint (px) 1024 Below this width the mobile drawer replaces the desktop dropdown
Hover Delay (ms) 150 Hover-intent delay before a dropdown opens
Animation Duration (ms) 200 CSS transition timing for open / close
Cache Menu Yes Cache rendered menu HTML in the dedicated menu cache type

All settings respect Magento's standard scope hierarchy — configure globally, per website, or per store view.

License

Commercial — see LICENSE.txt. One license per Magento production installation. Includes 12 months of free updates and email support.

More Information
Module Category Theme & UI
Best For All Sizes
FAQ

Frequently Asked Questions

Does Panth Mega Menu work on both Hyva and Luma?

Yes. The module ships with two purpose-built templates — Alpine.js + Tailwind for Hyva and vanilla JS for Luma — and auto-switches based on your active storefront theme.

Can I build unlimited-depth menus?

Yes. The drag-and-drop tree builder supports unlimited nesting. Desktop dropdowns render in multi-column layouts; mobile collapses deeper levels into accordion sections.

Can I show a CMS block inside a dropdown?

Yes. Drop any CMS block into any column of a parent item's dropdown. Perfect for promo banners, featured products, or custom HTML.

Does it support different menus per store view?

Yes. Menus are store-view scoped. You can build a unique menu per store view or copy a menu from one store view to another with one click.

Will this slow down my store?

No. The menu HTML is cached in Full-Page-Cache and invalidated only when underlying categories or CMS blocks change. The entire tree loads in a single DB query with EAV joins resolved in one shot.

Does it support keyboard navigation and ARIA?

Yes. The module is fully keyboard navigable with arrow keys, Enter, and Escape, and includes complete ARIA attributes for screen readers.

Does Panth Mega Menu replace Magento's native top-menu?

Optional. The Replace Native Menu setting hides Magento's default top-menu and renders the Panth menu in its place. Disable it to keep both running side-by-side for migration purposes.

Does the module use ObjectManager?

No. The codebase uses full constructor injection and passes MEQP (Magento Extension Quality Program) checks with zero ObjectManager usage.

Is the source code available?

Yes. The full source is on GitHub at github.com/mage2sk/module-mega-menu.

Does it work with multi-language stores?

Yes. All user-facing strings use Magento's standard __() translation function and can be translated to any language.

Does this replace Magento's native contact form?

Yes. When the module is enabled, the /contact URL is handled by Panth Advanced Contact Us and the stock Magento_Contact form is bypassed. Disable the module to revert to the native form — no data loss.

Can I add more than 3 custom tabs?

Yes. Both CMS block tabs and attribute tabs support unlimited entries. Add as many as your product requires.

Does Smart Badge slow down my category pages?

No. Badge lookups are indexed and cached per product + store view + customer group, and badge rendering is pure CSS. Typical overhead is under 5ms on listing pages.

Does this module override Magento's `cms/noroute/index` controller?

No. It uses Magento's standard layout update mechanism to replace the block under the content container. The controller itself is untouched.

What triggers a price drop alert?

Any reduction in the final displayed price for the store view where the customer subscribed — catalog regular price, special price, catalog price rule discount, tier pricing, or group pricing. The module compares the current final price against the baseline captured at subscription time.

Does this replace Magento's default product gallery?

Yes, on the product detail page. When the module is enabled, the default gallery.phtml is replaced with the Panth gallery (one template for Hyva, another for Luma — chosen automatically).

Does Panth Search Autocomplete work with Elasticsearch and OpenSearch?

Yes. The module is engine-agnostic — it uses whatever Magento is configured with (Elasticsearch 7, Elasticsearch 8, OpenSearch 1.x/2.x, or the MySQL fallback). No extra setup required.

Does Panth Advanced SEO replace Magento's native SEO features?

It enhances them. Magento's native meta fields still work — Panth Advanced SEO adds template-based defaults, tokens, hreflang groups, JSON-LD, SEO scoring, and dozens of other features Magento ships without.

Will this overwrite my custom image labels?

No. Merchant-authored labels (anything other than empty, the product name, Image, main product photo, or the raw filename) are preserved. Only Magento's default placeholders get upgraded to template output.

How is this different from Magento's native "file" custom option?

Native file custom options are tied to the cart quote item and don't persist cleanly as a first-class order record. Panth Order Attachments creates dedicated panth_quote_attachment and panth_order_attachment tables, linked to the sales order item, ensuring files remain accessible for the full order lifetime — including reorders, invoices, and RMAs.

Need this customised?

Talk to Kishan directly — written quote, scope and timeline within 24 hours. No sales call.

WhatsApp

Mega Menu for Magento 2 — Multi-Level Dropdown Navigation

$0.00
Step up

Customers usually upgrade to