Choose a menu type

Create a Desktop Mega Menu

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.

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.

Show products automatically

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.

Add and arrange menu items

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.

Icons, images and badges

Banners and Cards

In Cards & banners: large images with text and a button, to promote a new campaign or collection right inside the panel.

Tabs, banners and cards

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.

Campaign: tags, countdown, banners

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.

Insert your own HTML block

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.

Before: the theme's menu
After: Mega replaces the old 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.

Before: the theme's menu
After: Mega strip added under the header

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 it

Other platforms

The steps above are for Shopify — the default way.

Did this page help?

Need a hand? Chat with us in the app or write to [email protected] — send your store URL and the menu name.