Mega Menu
Replace your theme's category menu with a menu you build yourself: categories, CMS pages, links, headings and CMS blocks with images, labels and colours, opening as a dropdown or a multi-column mega…
Check it fits your store
Questions about compatibility? Contact us.
Details
Magento Mega Menu lets you replace your store's category-only navigation with a custom header menu. Combine categories, CMS pages, links, headings and CMS blocks, then present them as dropdowns or multi-column menus.
Build navigation with Magento Mega Menu
Create menus in Content › Elements › Mega Menus. Arrange items in a drag-and-drop tree or use arrow buttons from the keyboard. Populate a new menu with a store's main categories in one click, or copy an existing menu to prepare it for another store view.
- Categories: list subcategories automatically, up to three levels, with optional category images.
- CMS pages and custom links: link to full URLs, store paths, page anchors, email addresses or phone numbers.
- Headings: organize content with titles that do not link anywhere.
- CMS blocks: include widgets and Page Builder content within the menu.
Control item appearance and submenu layouts
Add an icon before an item's title or a larger image above it. Give labels such as New or Sale their own colors, set link and hover colors, open links in a new tab or apply nofollow. Control item visibility by store view, customer group and device, including desktop-only or mobile-only display.
- Open submenus on click or on hover with a configurable delay.
- Choose a dropdown list with side submenus or a mega menu with one to six columns.
- Make a mega menu full width or as wide as its columns.
- Set submenu background and link colors.
- Place a banner image, CMS block or both to the left, right, top or bottom of the links.
Use menus in the header and CMS content
Select the header menu for each store view in Stores › Configuration › Techimprovement › Mega Menu. It replaces the theme's category menu on desktop and in the mobile menu. The category menu returns automatically if you disable the custom menu or it has no item for that store view.
Place any menu on CMS pages, in blocks or in widget instances with the Mega Menu widget. Choose a horizontal bar or vertical list. Developers can also place a menu by identifier in layout XML.
Luma and Hyvä theme support
- Luma and Luma-based themes: the menu appears in the theme's navigation bar and becomes an accordion in the mobile menu.
- Hyvä: the menu replaces Hyvä's menu in the header row or a full-width row below it. On phones and tablets, the Hyvä menu button opens a drawer containing the menu as an accordion. A setting lets you keep Hyvä's own menu instead.
Hyvä support requires no Tailwind rebuild. The module provides a small stylesheet and script that load only on pages with a menu. Change colors and sizes through CSS custom properties.
Keyboard navigation and caching
The menu provides a navigation landmark, keyboard-operated submenu arrow buttons with expanded-state information, Escape to close and current-page identification. The Hyvä drawer keeps keyboard focus inside while open and returns focus to the menu button when closed.
Built menus cache by store view, customer group and protocol. Saving a menu, an item or a category, page or block shown in it refreshes the cached menus. Pages remain cacheable by full page cache and Varnish.
Requirements and developer tools
- Magento Open Source or Adobe Commerce 2.4.7–2.4.9.
- PHP 8.2–8.5.
- Luma, Luma/Blank-based themes or Hyvä Theme 1.3 or later using Hyva/default or a child theme.
- Magento_Catalog, Magento_Cms, Magento_Customer and Magento_Widget modules enabled.
Developer tools include service contracts for menus and items, declarative schema and CSS custom properties for theming. The uninstall routine removes the module's tables and settings.
Digital download and edition options
Choose the Community, Enterprise or Magento Cloud edition option. This digital product includes the Mega Menu — Version 1.1.0 download.
Change Log
Version 1.1.0 – October 30, 2026
New
- Hyvä theme support (Hyvä Theme 1.3+, Hyva/default or a child theme, no Tailwind rebuild): the header menu takes the place of Hyvä's navigation in Hyvä's own header blocks, topmenu_desktop (desktop menu) and topmenu_mobile (menu button and a mobile menu drawer with the menu as an accordion), through view/frontend/layout/hyva_default.xml. The drawer is a modal : focus moves into it and stays there, Escape, a tap outside and the close button close it, and the focus returns to the menu button. Widgets work on Hyvä too.
- Plain stylesheet view/frontend/web/css/mega-menu-hyva.css, linked only on pages that show a menu, with CSS custom properties for restyling (it uses Hyvä's --color-primary, --color-fg and --color-surface when the theme defines them). Menus switch between accordion and bar at Hyvä's 1024 px breakpoint.
- js/menu.js runs as a deferred plain script on Hyvä (data-ti-megamenu-standalone, options in data-ti-megamenu) and opens the drawer; on Luma it is still the RequireJS module started by data-mage-init.
- Settings Use in the Hyvä Header (No keeps Hyvä's own menu) and Hyvä Desktop Menu Position (in the header row, or a full-width row below it for menus with many top-level items).
- Hyvä caches its header navigation (topmenu_generic) per store view; while the mega menu is shown there, the menu and the customer group are added to that block's cache key, so customer-group items stay correct.
Earlier versions (2)
Version 1.0.1 – October 29, 2026
Fixed
- The submenu toggle next to a top-level item of the horizontal menu is 24 px wide (was 20 px), the minimum touch target size of WCAG 2.2 (2.5.8).
Version 1.0.0 – October 26, 2026
New
- Menus (Content › Elements › Mega Menus) with a grid, mass enable/disable/delete and Copy Menu (the copy with all items, disabled).
- Item types: category (with up to three levels of subcategories listed automatically, optionally with their category images), CMS page, custom link (full URL, store path, #anchor, mailto:, tel:), text heading and CMS block.
- Drag-and-drop item tree with keyboard buttons (up, down, out of, into a submenu), Save Order and Add the categories of a store.
- Per item: image (icon before or image above the title, upload or media gallery, size saved), label with text and background colors, link and link hover colors, open in a new tab, rel="nofollow", store views, customer groups, desktop/mobile only, CSS class.
- Submenus shown on hover or click: dropdown list with side submenus, or mega menu with 1–6 columns, full or fitted width, background/link/hover colors, and a banner image and CMS block left, right, above or below the links.
- Header menu per store view in place of the theme's category menu (desktop bar and mobile accordion, including the header's mobile menu button); the category menu is kept when the menu is disabled or empty for a store view.
- Mega Menu widget (horizontal bar or vertical list) and a block for layout XML by menu identifier.
- Default colors in the configuration, CSS custom properties for themes, accessible markup (navigation landmark, disclosure buttons with aria-expanded, Escape, aria-current), no jQuery on the storefront.
- Menu cache per store view, customer group and protocol, refreshed by menu, item, category, page and block changes (block cache, full page cache, Varnish).
- Service contracts MenuRepositoryInterface and MenuItemRepositoryInterface, declarative schema, uninstall with --remove-data.
Reviews
Be the first to review Mega Menu
Reviews are written by customers with an account. Sign in to tell others how it works on your store.
