The main menu of your PrestaShop shop, in columns and on mobile

PrestaShop's native menu shows your categories and a few links, in a single form. No columns, no "New" label, no featured product, no second menu in the footer, and on PrestaShop 1.7.6 a category reserved to a customer group can stay visible to everyone.

On installation, the module takes over your native menu in the same order: categories with their subcategories, pages, products, brands, suppliers, links. The native menu stays on while you prepare the new one; a "Switch to this menu" button turns it off (never uninstalled), and another one takes you back. In multistore, takeover and return are done shop by shop.

Nothing needs setting to start: the menu taken over shows as a menu bar, with your theme's colours and font. Layout, style and font can then be changed, if you want.

In the back office, the menu tree is rearranged by drag and drop (or with the keyboard), and the live preview, desktop and mobile, shows the shop rendering before you save.

• Dropdown or columns: 1 to 6 columns, each sub-entry in its column.
• Automatic subcategories: a "Category" entry shows its subcategories on its own and follows your catalogue. Depth (up to 12 levels) and number per level can be set.
• Coloured labels on an entry ("New", "Sale"), in each language.
• Category images in the columns, loaded only when a panel opens.
• Product card in a panel: image, name and the customer's price (the price is never cached from one customer to another).
• Visibility per customer group, per screen (desktop, mobile) and by dates.

For a large catalogue, the main menu can open in a side panel: each click goes one level down, with a back button and the title of the level, with no depth limit. Four layouts to choose from: the menu bar only, the menu bar with the panel behind the button, the panel only, or the full page. The panel opens on the side you choose, mirrored automatically in Arabic.

• Click: the name opens the page and the arrow opens the level, or every click opens the level.
• Highlight card: an image and a link at the bottom of a level (a collection, a promotion), the image checked and re-encoded on upload.
• Search in the panel (LNK Advanced Search when it is active, otherwise PrestaShop's) and customer account links.
• On mobile, the panel button takes the place of the theme's menu button: one menu on screen, with the languages and currencies at the bottom of the panel when the shop offers several.
• Without JavaScript, the panel stays usable as an expandable list. Beyond 300 entries, deep levels arrive when they open.

After the update, your shop keeps its menu bar: the panel is turned on in the settings of the main menu.

A header menu, a footer menu, a menu in a column: each menu has its place, its style and its font. Ten places are offered (header, two navigation bars, full width, footer and around it, left and right columns). To place a menu anywhere else, the back office gives you the call ready to copy into your theme. The main menu carries the markers of the Classic and Hummingbird themes: it moves into their mobile drawer with no setting.

Eight ready-made styles, or "Inherit from the theme" to keep its colours. Five fonts under a free licence (including Cairo for Arabic), served by your shop, never by Google; the theme's font stays the default setting. On mobile, the word "Menu" next to the icon can be hidden; screen readers still read it.

Figures measured on the delivered module (version 1.9.3), gzip-compressed (level 9). As a menu bar: no JavaScript, no jQuery; submenus open on hover, click and keyboard in HTML and CSS only. A 2.4 KB structure stylesheet, plus the chosen style only (0.4 to 0.6 KB) and, if you choose one, the chosen font only (0.4 to 0.6 KB of CSS, then the displayed alphabet). The drawer panel adds, only when it is on, a 1.9 KB script with no dependency and a 1.8 KB stylesheet. Menu images load only when a panel opens, with their dimensions.

The template variables have the same shape as those of the native menu, and the actionMainMenuModifier hook is called as in the native module. A menu is placed by its code: {hook h='displayLnkMegamenu' code='footer'} or {widget name='lnk_megamenu' code='footer'}. The --lnk-megamenu-* CSS variables style the menu without touching the template, which can itself be overridden. A theme can deliver its starting menus (seed.json, documented contract), or only their shape and let the shop provide the entries ("items": "native"). Six hooks let a module or a theme add its content to the drawer panel.

Each version is checked by a real installation: PrestaShop 1.7.6, 1.7.8 and 8.1 for the 1.1.N archive, PrestaShop 9.0 for the 1.9.N archive.