Mega menu

A mega menu turns a plain navigation dropdown into a wide panel with columns of links, product rails, or featured images. In Reign you build it from blocks inside the Header section, and each panel attaches to one top-level item in your store navigation.

A mega menu needs two things to work together:

A navigation menu in your Shopify admin that has three levels (a top-level item, the columns under it, and the links inside each column).
A mega menu block in the Header section that names the same top-level item so Reign knows which dropdown to replace.

If the block name and the menu item name do not match, the panel does not appear and the link falls back to a plain dropdown.

Build the navigation menu first

The link structure comes from your Shopify navigation, not from the theme. Set it up before you add the block.

In your Shopify admin, go to Online Store, then Navigation.
Open the menu your header uses. By default this is Main menu. (You can confirm which menu the header reads in the Header section under Menu.)
Add a top-level item, for example Shop.
Add items nested under it. Each second-level item becomes a column heading in the panel.
Add items nested under those. Each third-level item becomes a link inside that column.

The column layout and link text always come from this menu. The blocks below control the panel style and any extra content.

Add a mega menu block

In the theme editor, open the Header section.
Click Add block.
Choose one of the mega menu blocks (described below).
In the block settings, find the Binding heading and the Parent menu item field.
Type the exact name of the top-level menu item you want this panel to attach to, for example Shop. Match the spelling and capitalization of the menu item.

You can add several mega menu blocks, one per top-level item, to give different sections of your store different panel styles.

Choosing a panel style

When you click Add block, Reign offers the mega menu in several starting layouts. The editor lists each one as Mega menu followed by the layout name. They share the same binding field and differ in what content they include.

Links: columns of navigation links only, taken from your menu.
Feature: link columns plus a media card for a featured image or video.
Collage: link columns plus an arrangement of media cards.
Editorial: link columns plus a captioned landscape image card.
Showcase: a two-card image gallery with headings, for an image-led panel.

The five layouts above are presets of the one Mega menu block. After you add one you can add, remove, or rearrange the child blocks inside it. (For how presets and blocks work, see Sections, blocks, and groups.) The tabbed layout is a separate block with its own settings, covered below.

Mega menu block settings

This is the panel container. Its own settings are short because most content lives in the child blocks.

Binding

Parent menu item: the name of the top-level navigation item this panel attaches to. Type it exactly as it appears in your menu. This is the link that the merchant defines: the panel replaces the plain dropdown for that item.

The child blocks you can add inside this panel:

Menu links: the link columns. See its settings below.
Collage: a group of Media card blocks arranged into a layout.
Other content blocks such as Media card for a featured image or promotion.

Menu links block settings

Add this block inside a mega menu panel to render the link columns. The columns and link text come from the bound menu item; these settings control how they look and add optional extra text.

Intro text: a short line of text shown above the columns.
Button label: text for an optional call-to-action link below the columns. Leave it empty to hide the button.
Button link: where the call-to-action link goes.
Heading size: the size of the column headings. Choose Small, Base, or Large.
Link gap: the vertical space between links within a column, in pixels.
Column gap: the horizontal space between columns, in pixels.

Tabbed mega menu block settings

This is a separate block, listed in the editor as the Mega menu tabs layout. It binds to a top-level menu item the same way and holds Tab blocks instead of link columns.

Binding

Parent menu item: the top-level menu item this tabbed panel attaches to. Type it exactly as it appears in your menu.

Other settings on the tabs panel:

Intro text: a short line of text shown above the tab list.
Button label: text for an optional call-to-action link in the tab rail. Leave it empty to hide the button.
Button link: where that call-to-action link goes.

Tab block settings

Add a Tab block inside the tabs panel for each tab. Each tab is a row in the rail on the left and a content panel on the right.

Tab title: the tab name shown in the rail.
Tab description: a short line under the tab title in the rail.
Products heading: a heading shown above the product rail in the tab panel.
Collection: pick a collection to fill the product rail with its products. A collection takes priority over hand-picked products.
Products: hand-pick up to six products for the rail. Used only when no Collection is set.

Each Tab can also hold a Media card for a featured image alongside the products.

Tips

The panel only appears when the Parent menu item value exactly matches a top-level item in the header menu. If a dropdown looks plain, recheck the spelling against your navigation in the Shopify admin.
Columns and links come from your navigation, not from the block. To change which links appear or how they group, edit the menu under Navigation, not the theme.
A panel needs the menu item to have child items. A top-level item with no nesting has nothing to fill the columns.
One mega menu block attaches to one top-level item. Add a separate block for each item that should have a rich dropdown.
Whether dropdowns open on hover or click is set once for the whole header under Open menu on in the Header section, not per panel.