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.
|
Top Rated Plus on Upwork 100% Job Success • 10+ Years Magento Experience Adobe Certified • Hyva Specialist |
Magento Development Team Custom Modules • Theme Design • Migrations Performance • SEO • 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
- 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
- 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
- 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_btags
- 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
- 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
- Vanilla JS template — zero jQuery / RequireJS coupling on the frontend path
- Respects Luma layout breakpoints — integrates cleanly with existing Luma themes
- 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
- 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
- FPC-aware caching — menu HTML is served from Full-Page-Cache and invalidated by
cms_b/cat_ctags - 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
| 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 |
| 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) |
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- Download the extension ZIP from Packagist or the Adobe Commerce Marketplace
- Extract to
app/code/Panth/MegaMenu/in your Magento installation - Ensure
app/code/Panth/Core/is also installed (free base module) - Run the same commands above starting from
bin/magento module:enable
bin/magento module:status Panth_MegaMenu
# Expected output: Module is enabledNavigate 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.
Open Stores → Panth Infotech → Mega Menu → Menu Builder.
- Add items — click Add Item and pick a type (category, CMS page, custom URL, or label-only parent)
- Drag to reorder — use the drag handle to nest and reorder the tree
- Configure columns — for each parent item, choose 1-4 column dropdown layout
- Inject CMS blocks — drop any CMS block into a column for banners, featured products, or custom HTML
- Add icons / images — upload per-item images or use SVG / icon-font classes
- Style it — set per-menu colours, hover behaviour, and animation timings
- 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.
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.
Yes. The drag-and-drop tree builder supports unlimited nesting. Desktop dropdowns render in multi-column layouts; mobile collapses deeper levels into accordion sections.
Yes. Drop any CMS block into any column of a parent item's dropdown. Perfect for promo banners, featured products, or custom HTML.
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.
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.
Yes. The module is fully keyboard navigable with arrow keys, Enter, and Escape, and includes complete ARIA attributes for screen readers.
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.
No. The codebase uses full constructor injection and passes MEQP (Magento Extension Quality Program) checks with zero ObjectManager usage.
Yes. The full source is on GitHub at github.com/mage2sk/module-mega-menu.
Yes. All user-facing strings use Magento's standard __() translation function and can be translated to any language.
| Channel | Contact |
|---|---|
| kishansavaliyakb@gmail.com | |
| Website | kishansavaliya.com |
| +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 for paid licenses. Includes 12 months of free updates and email support.
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