Magento 2 Mega Menu Extension: Drag-and-Drop Builder, CMS Blocks, Sticky Menu and Mobile Drawer (Hyva + Luma)
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
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.
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.
|
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
- Who Is It For
- Key Features
- Compatibility
- Installation
- Configuration
- Menu Builder Guide
- How It Works
- FAQ
- Support
- About Panth Infotech
- Quick Links
- 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.
- 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.
- 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.
- 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.
- 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.
- 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_Coreso the right template loads without manual configuration.
- 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.
- Store-view scoped menus stored in the
panth_megamenu_storerelation 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.
- FPC-aware caching with
cms_bandcat_ccache 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
ObjectManagerusage. - Translation ready, every label uses Magento's
__()function. - Full keyboard navigation with arrow keys, Enter, Escape, and ARIA roles for screen readers.
| 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) |
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 latest release from Packagist or from the product page.
- Extract it to
app/code/Panth/MegaMenu/in your Magento install. - Make sure
Panth_Coreis installed too (required dependency). - Run the commands above starting from
bin/magento module:enable.
bin/magento module:status Panth_MegaMenu
# Expected: Module is enabledAfter install, open:
Admin → Panth Extensions → Mega Menu → Menu Items
Admin → Stores → Configuration → Panth Extensions → MegaMenu
Go to Stores → Configuration → Panth Extensions → MegaMenu.
All settings support the standard Magento scope hierarchy: default, website, and store view.
| 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. |
| 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. |
| 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. |
| 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. |
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. |
| 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. |
| 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. |
Open Admin → Panth Extensions → Mega Menu → Menu Items.
- Create a menu and give it an identifier (e.g.,
mainmenu). Assign it to one or more store views. - Add items by clicking Add Item and choosing the type: category link, CMS page link, custom URL, label-only parent, or raw HTML.
- Drag to reorder using the drag handle to nest and rearrange items in the tree.
- Set columns on each parent item to choose how many columns (1 to 4) its dropdown uses.
- Inject CMS blocks by assigning a CMS block to a column for banners, featured products, or custom HTML.
- Add icons or images by uploading an image or entering an icon-font class per item.
- 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.
- When the module is enabled, it reads the Menu Identifier from configuration and loads the matching menu record from
panth_megamenu_menu. - Menu items are fetched from
panth_megamenu_itemin a single query, resolved by hierarchy level and position. - The rendered HTML is stored in
panth_megamenu_cachekeyed by menu, store view, and customer group, so repeat page loads skip the build step entirely. - 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_Coreand picks the right one. - 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.
- When a referenced category or CMS block is saved in the admin, Magento fires the
cat_corcms_bcache tags, which invalidates the relevant menu cache entries automatically.
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.
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.
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.
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.
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.
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.
Yes. The module is fully keyboard navigable with arrow keys, Enter, and Escape, and includes ARIA roles and labels throughout for screen reader compatibility.
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.
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.
| Channel | Contact |
|---|---|
| Product Page | kishansavaliya.com/magento-2-mega-menu.html |
| 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 | P 8 anth Inf A117 otech |
Response time: 1-2 business days.
Looking for custom Magento module development, Hyva theme work, store migrations, or performance tuning? Get a free quote in 24 hours:
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.
| 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 |
| kishansavaliyakb@gmail.com | |
| +91 84012 70422 |
Ready to give your store a better navigation experience?
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