README

Mega Menu for Magento 2 | Multi-Level Dropdown Navigation by Panth Infotech

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.

Need Custom Magento 2 Development?

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.

Kishan Savaliya

Top Rated Plus on Upwork

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

Panth Infotech Agency

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

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

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

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

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

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.

Menu Builder Guide

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

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.

FAQ

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.

Support

Channel	Contact
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 for paid licenses. Includes 12 months of free updates and email support.

Need Custom Magento Development?

License

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

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 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.

Quick Links

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

mage2kishan / module-mega-menu

Maintainers

Package info

Statistics

Security