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. Ships with a mobile-responsive drawer, Alpine.js-powered animations for Hyva, vanilla JS for Luma, dynamic per-menu styles, and per-store-view configuration out of the box.

Panth Mega Menu replaces Magento's basic top-menu with a modern, conversion-focused navigation system. Build unlimited-depth menus visually with the drag-and-drop 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. The frontend auto-detects your theme — Hyva stores get a lightweight Alpine.js + Tailwind template with smooth micro-interactions, while Luma stores get a zero-dependency vanilla JS template. A true mobile drawer replaces the desktop dropdown below your configured breakpoint, with big touch targets and accordion-style sub-menus.

Dynamic style controls let you tune colors, spacing, hover delay, animation duration, and column widths per menu — all without touching a single line of CSS. Full-Page-Cache aware, keyboard-navigable (ARIA-compliant), and built following MEQP standards with zero ObjectManager usage.

Get a free quote for your project in 24 hours — custom mega menus, Hyva themes, performance optimization, M1-to-M2 migrations, and Adobe Commerce Cloud.

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

• Key Features
• Why Panth Mega Menu
• Compatibility
• Installation
• Configuration
• Menu Builder Guide
• Frontend Templates
• FAQ
• Support
• About Panth Infotech
• Quick Links

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

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

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

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

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

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.

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.

Response time: 1-2 business days for paid licenses. Includes 12 months of free updates and email support.

Need Custom Magento Development?

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

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 specializing in high-quality, security-focused extensions and themes for both Hyva and Luma storefronts. Our extension suite covers SEO, performance, checkout, product presentation, customer engagement, and store management — over 34 modules built to MEQP standards and tested across Magento 2.4.4 to 2.4.8.

Browse the full extension catalog on the Adobe Commerce Marketplace or Packagist.

• Website: kishansavaliya.com
• Get a Quote: kishansavaliya.com/get-quote
• Upwork Profile (Top Rated Plus): upwork.com/freelancers/~016dd1767321100e21
• Upwork Agency: upwork.com/agencies/1881421506131960778
• Packagist: packagist.org/packages/mage2kishan/module-mega-menu
• GitHub: github.com/mage2sk/module-mega-menu
• Adobe Marketplace: commercemarketplace.adobe.com
• Email: kishansavaliyakb@gmail.com
• WhatsApp: +91 84012 70422

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