PS PrestaShop PrestaShop Beginner

Mega Menu & Burger — Complete guide

Install, configure and operate the mega menu, walker menu and burger menu: drag-and-drop editor, columns, images, CMS blocks, automatic category tree, multilingual and multistore, for PrestaShop 8 and 9.

Updated Module version 1.2.1

Overview

The Mega Menu & Burger module (datafireflymegamenu) replaces your store navigation with a complete, configurable system: a multi-column mega menu, a classic recursive walker dropdown menu and a smooth burger menu on mobile. Everything is built visually in the back office, with drag and drop, without touching a line of code.

Each menu can display categories, products (with photo and price), brands, CMS pages, custom links, free HTML blocks or promotional images, organized into columns inside mega panels. The module is fully multilingual and multistore, and the item matching the visited page is highlighted automatically.

A “Main menu” demo menu is created automatically on installation on the displayNav2 hook, with a Home link and a category tree. You can freely edit or delete it.

Compatibility

  • PrestaShop 8.0 to 9.x
  • PHP 7.4 to 8.x
  • Single store and multistore
  • 5 bundled languages: FR, EN, ES, DE, IT (and translatable without limit)
  • Classic theme and custom themes
  • PSR-4 architecture with no Composer dependency

Installation

  1. In the back office, open Modules > Module Manager.
  2. Click Upload a module and select the datafireflymegamenu.zip file.
  3. Once installed, click Configure.

On installation, the module creates its tables, registers its display and cache-invalidation hooks, adds its admin tab and generates the demo menu. When upgrading from a previous version, the upgrade scripts add the new columns and purge the render cache automatically.

Quick start

  1. Open the module configuration. On the left, the My menus list and the Menu settings; on the right, the Menu structure.
  2. Click New menu, give it a name (per language), choose its display hook and its layout, then save.
  3. In the Menu structure area, click Add root item and choose its type.
  4. Drag and drop items to reorder or nest them. Positions are saved automatically.

The Menu settings panel controls a menu’s global behavior:

  • Menu name: internal label, translatable per language.
  • Display hook: where the menu is rendered (see the Display and hooks section).
  • Layout: Mega menu (column panels) or Classic dropdown (recursive walker).
  • Open on: sub-menus open on hover or on click. On hover, a short close grace delay prevents flickering during diagonal movements.
  • Mobile breakpoint (px): width below which the menu switches to mobile/burger mode (991 px by default).
  • Max width (px): centers the bar on the chosen width to align it with the theme container (e.g. 1140 px). 0 = full width.
  • Sticky bar: the menu stays fixed at the top while scrolling.
  • Full-width mega panels: mega panels span the entire width of the bar.
  • Burger menu on mobile: enables the burger menu below the breakpoint.
  • Enabled: shows or hides the menu on the front office.
  • Stores (multistore): selects the stores on which the menu is displayed.

Building the tree (drag and drop)

A menu’s structure is built in the Menu structure area. Each row represents an item, with a drag handle, a pill indicating its type and action buttons.

  • Reorder: grab the handle and move the item vertically.
  • Nest: drop an item inside another to make it a sub-item (unlimited nesting).
  • Add sub-item: dedicated button on each row.
  • Edit / Delete: icons on each row. Deleting an item also deletes its sub-items.

Positions and nesting are saved automatically on every move, without a page reload.

Item types

Each item has a type that determines its content and its link. The edit window automatically adapts the available fields to the chosen type:

  • Custom link: a free URL, translatable per language.
  • Category: link to a store category, with optional image and product count.
  • Category tree (auto): automatically generates the subcategories (see dedicated section).
  • Product: link to a product page, with optional cover photo and price.
  • Brand: link to a brand; All brands: link to the brands page.
  • Supplier: link to a supplier.
  • CMS page and CMS category: links to your editorial content.
  • HTML / CMS block: free HTML content, ideal for a promo or rich text.
  • Image / promo: a clickable image (with a URL).
  • Label: a simple non-clickable title, useful as a column header.
  • Divider: a separator line — horizontal in dropdown and mega panels, vertical between the items of the bar.

For each item, you can also set: a label, a colored badge (text + color), a Material icon, a custom CSS class, opening in a new tab, and per-device visibility (mobile, tablet, desktop).

Display options: images, prices and counts

Depending on the chosen type, the edit window offers a Display options block:

  • Show the image (category, category tree, product): displays the category image or the product cover photo as a thumbnail in the menu. Untick it for a 100% text menu. An image uploaded manually on the item always takes priority.
  • Show the product price (product): displays the product price, formatted for the visitor’s currency and language, to the right of the label.
  • Show the product count (category, category tree): displays as a pill the number of active products in the category, subcategories included.
  • Append a “View all” link (category tree): adds a link to the tree’s root category at the end of the list.

Combine a Product item with image + price inside a mega panel column to showcase a new arrival or a promotion right in the navigation.

Mega menu: columns, images and HTML blocks

To turn a sub-menu into a mega panel, open the parent item and set Sub-menu display to Mega panel (columns). Then set the number of columns.

Each direct child of the parent then becomes a column of the panel. You can adjust the width of each column via its Column span field, and drop sub-links, an HTML block or a promotional image into it.

Mix types within a single mega panel: a few category columns, one “HTML block” column for a promo and one “Image” column to showcase a new arrival.

Automatic category tree

The Category tree (auto) type avoids any manual input: it generates its subcategories on its own from a root category, down to the level set by the Sub-levels field.

Its Display options let you toggle category images (thumbnails), the per-category product count, and a “View all” link pointing to the root category, appended at the end of the list.

Pair this type with a Mega panel display to get, in seconds, a complete “Shop” mega menu that always stays in sync with your catalog.

The generated tree follows the active categories and their order in PrestaShop. Any category change is reflected automatically (see Performance and cache).

Multilingual and multistore

The label, custom URL, badge and HTML content of each item are translatable via the language tabs of the edit window. The menu name is multilingual too.

In multistore, each menu is assigned to one or several stores from its settings. The same menu can therefore be displayed on some stores only.

Display, hooks and position

A menu is displayed via the hook chosen in its settings. The supported hooks are:

  • displayNav2 — main navigation bar (default)
  • displayTop — top of the page, next to the logo and the search bar
  • displayNavFullWidth — full-width banner
  • displayFooter — footer
  • displayLeftColumn and displayRightColumn — side columns

On displayTop, the bar automatically shrinks to the width of its content so it can share the same line as the theme’s logo and search bar; full-width mega panels are centered on the screen there.

For a custom location, you can also graft the module onto another hook from PrestaShop’s Positions page, then select that hook in the menu settings.

Current page and navigation

The menu item matching the visited page — and its root item — automatically receive the is-active class and are highlighted according to the menu’s hover style. Detection happens in the browser (exact URL match, then best section match), which stays fully compatible with render caching.

Mobile mode and burger menu

Below the defined breakpoint, the menu automatically switches to mobile mode. If the Burger menu on mobile option is enabled, navigation takes the form of a burger menu: slide-in panel, accordion sub-menus, dimmed backdrop and page scroll lock.

The module respects the reduced motion system preference (prefers-reduced-motion) by disabling animations for affected users.

Performance and cache

Each menu’s rendering is cached by Smarty, with a key that accounts for the menu, language, store, currency and customer group. Menus are therefore displayed without recomputation on every page.

The cache is invalidated automatically when a category, CMS page or brand is added, edited or deleted, as well as on every save of a menu or item in the back office. Automatic trees, product counts and prices therefore stay in sync with your catalog.

After a manual intervention (theme change, partial clearing), clear PrestaShop’s cache from Advanced Parameters > Performance to force a new render.

FAQ and troubleshooting

The menu does not appear on the front office

Check that the menu is enabled, that it is assigned to the right store, and that its hook matches a location actually displayed by your theme. Then clear PrestaShop’s cache and reload in private browsing.

The chosen hook does not appear in my theme

Not all themes implement every hook. Choose a hook actually present in your theme (often displayNav2 or displayTop), or graft the module onto a custom hook via the Positions page.

My mega menu shows no columns

Open the parent item and set Sub-menu display to Mega panel (columns), set the number of columns, then check that child items exist: each direct child becomes a column.

Category or product images are not displayed

Check that the Show the image box is ticked in the item’s Display options, that the category actually has an image (or the product a cover photo), then clear the cache. For an image-free menu, simply untick this option.

The menu wraps or pushes the search bar to the next line (displayTop)

Since version 1.2.1, the bar shrinks to its content on displayTop. If the issue persists after updating, clear PrestaShop’s cache: the cached HTML must be regenerated with the new classes.

Changes do not appear immediately

Since rendering is cached, clear PrestaShop’s cache after a manual change. Changes to categories, CMS pages, brands, menus and items invalidate the cache automatically.

Is it compatible with PrestaShop 9?

Yes. The module is compatible with PrestaShop 8 and 9, in multistore and multilingual setups, and natively handles the technical differences between both versions. Prices displayed in the menu use PrestaShop 9’s locale formatter with an automatic fallback on PrestaShop 8.

Was this page helpful?

Still stuck? Contact support