A large menu panel drops down under the header when shoppers hover: several columns, images, products, and Tabs so one panel can hold Women, Men and Kids. It only shows on desktop; phones reuse the same tree.
Before you start: Navi+ is installed and you have turned on Store Connector in your theme.
1Choose a menu type
In Navi+ click Add menu, choose the Desktop Mega Menu card, then click Build my Mega Menu.
2Two ways to start
Let AI build it
AI reads your store's real collections and products, groups them into columns and sections, picks icons and writes descriptions. You choose a style and colors, click Generate my menu, wait 10 to 40 seconds, then pick one design.
This usually takes 10 to 40 seconds. Here is what AI is doing right now.18s
Build it yourself
Start from an empty menu: click Add your first item, then add each item and column by hand. Links come from your store's collections, products and pages, so you don't type them.
The Starter (Free) plan only has the text version of AI; the version with images and prices needs an upgrade. There is a 14-day free trial. See Plans and billing. Details: Design a menu with AI.
3Fine-tune by hand
Whether AI or you built it, you still fine-tune in Build Menu: add items, drag to reorder, click an item to rename it or change its link and image. Go to Design to change colors and font size.
Column width: set Width layout on a 12-part scale (4/12 + 4/12 + 4/12); each row must total 12/12. Limit: up to 3 levels (item, column, content inside a column). See Columns, dividers and pinned items.
4Typical item patterns
In a column, click + ITEM to open the Add item popup, then choose a pattern. These are the most used.
Tabs: one panel, many content pages
Tabs split one Mega panel into several smaller panels, each with its own columns, images and products. Tabs sit in a left column or a top row. Shoppers switch tabs by hovering or clicking, with no page reload. Good for a few big groups (Women, Men, Kids); with only 3 to 5 categories, split them straight into columns.
To add: in the column gap of an item, click + ITEM > Basics > Tabs above columns, then add columns to each tab. Hover or click to choose in Configure > Desktop > the Tab tab; the tab position and style are in Edit item of the first tab. On phones tabs are always a horizontal bar. More about Tabs
Automatic product blocks
In Live sections: New arrivals, Best sellers, Shop by category or Custom rule. Products are pulled from a collection and refresh automatically, up to 20 per block. Shopify only.
List: a list of links
The most basic pattern: a neat column of links, with a heading line. Add List with icons when you want an icon before each line.
Grid: a grid of category images
Image grid and Icon grid arrange categories into a grid of images or icons with a name below. Shoppers recognize product groups faster than with text.
Banners and Cards
In Cards & banners: large images with text and a button, to promote a new campaign or collection right inside the panel.
Campaign spot
A slot reserved for a campaign: assign it and it shows a Tag (HOT, SALE), a countdown or a scheduled banner, and removes itself when it expires.
HTML block and Video
In Media & code: paste HTML code (an embedded video, sign-up form, widget) or add Video & audio. The code only runs when a shopper opens the menu, so it doesn't slow the page. Paste only code you trust.
Shopify menu (embedding a whole Shopify menu) doesn't work in a Desktop Mega, only in a Mobile Menu: Embed your Shopify menu.
5Publish: put it in the header
Open Publish, choose where to place it, then click Turn on. Navi+ has already found the placement spots on your theme. The two main options differ in whether the theme's old menu stays.
Replace your main menu
Mega replaces the theme's old menu bar. Logo, search and cart stay; only the navigation row changes to Mega. Recommended when Mega is your only main menu.
Add below your header
A full-width Mega strip right under the header. The theme's old menu stays, and Mega is a second bar underneath with its own row. Good when you want to keep the old menu, or your store has many categories.
Menu bar wraps onto a second row
When you have many level 1 items but the theme's header is narrow (logo, search and cart take up room), the last items get pushed to a second row. There are 6 ways to fit them on one row.
See how to fix itOther platforms
The steps above are for Shopify — the default way.
On Wix, Add menu opens the template picker directly instead of the builder above; choose Desktop Mega Menu and a template, then edit it in the menu editor. Turn it on with the Publish this menu switch, then Save. Wix has no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections and Shopify menu blocks are only on Shopify.
On WordPress and other websites, Add menu opens the template picker directly instead of the builder above; choose Desktop Mega Menu and a template, then edit it in the menu editor. Turn it on with the Publish this menu switch, then Save. There is no “Menu in Section” app block, so it can only be placed with a CSS selector. The Live sections and Shopify menu blocks are only on Shopify.