Header: Main menu

Main menu

The Main menu block is your storefront's primary navigation. It lists your categories and can expand into a full megamenu with subcategories, brands, and custom links. This is the most configurable header block — you can control colors, fonts, hover effects, and exactly how the dropdown behaves.

What it shows

The menu pulls your category tree and displays the top level as a horizontal bar. Hovering or clicking an item opens its subcategories. You decide which extra items appear alongside the categories — your home page link, new products, special offers, brands, and your own custom links.

Screenshot needed: A storefront header with the main menu open, showing an expanded megamenu with subcategories

What appears in the menu

Setting	What it does
Show home page	Adds a link to the front page
Show new products	Adds a "New products" link
Show special products	Adds a link to offers / special products
Show static pages	Includes your information pages in the menu
Show brands	Adds a brands link
Show brands in megamenu	Shows brands inside the expanded megamenu instead of as a single link
Custom links	Add your own links using the rich text editor

Custom links — remove the placeholder text

The Custom links field is a rich text area where you add your own links to the menu. It comes pre-filled with placeholder sample text, and that sample text shows up live in your storefront menu until you clear it. If you spot stray sample text in your menu, this is almost always the cause.

Remove the placeholder: In the Design builder, click the Main menu block to open its settings. Turn on Advanced mode if it isn't already on. Find the Custom links field and open its text editor. Delete the placeholder text (add your own links if you want any), then Save and publish. Leaving the field empty removes the custom links entirely.

The megamenu

The megamenu is the large panel that opens beneath a menu item. You control how it opens and how deep it goes.

Setting	What it controls
Expand	Turns the megamenu behaviour on
Megamenu style	The visual style of the expanded panel
Megamenu action	Whether it opens on hover or on click
Megamenu levels	How many category levels deep the menu goes
Megamenu width	Whether the panel spans the full width
Toggle subcategories	Lets subcategories collapse and expand
Number of dropdown columns	How many columns subcategories are arranged into
"See all" size and weight	Styling for the "see all" link at the bottom of a category

Megamenu colors

Set the megamenu's own background, text color, and hover text color independently of the main menu bar. This lets the dropdown panel have a different look from the bar it drops out of.

Styling the menu bar

The menu has three interaction states — normal, hover, and active (the current page). You can set background and text colors for each.

State	Settings
Normal	First-level background, first-level text color
Hover	First-level background on hover, text color on hover
Active	First-level background when active, text color when active

Typography and spacing

Setting	What it controls
Font size	Size of the menu text
Font weight	How bold the text is
Text transform	Uppercase, lowercase, capitalize, or none
Gap	Spacing between menu items
Show chevron	Show a small arrow next to items that have a dropdown
Chevron gap	Spacing between the text and its chevron

You can also set separate font size, weight, and text transform for each of the first, second, and third category levels inside the megamenu.

Underline effect

Turn on the text decoration effect to give menu items an animated underline on hover. You then control its thickness, offset (distance from the text), and color.

Borders and corners

Setting	What it controls
Show border	Adds a border to the menu
Border color	The border's color
Dropdown corner radius	Rounds the corners of the dropdown panel
Use global radius	Use your theme's global corner rounding instead of a custom value

Layout and visibility

Text alignment — aligns the menu items within the bar.
Background and text color — the base colors for the whole menu.
Width settings for desktop, tablet, and mobile.
Custom class and block conditions for advanced styling and show/hide rules.

Tips

Megamenu levels controls depth. If your subcategories aren't showing, raise the level count.
Hover vs. click matters for touch devices. Click-to-open is often friendlier on tablets.
The three color states (normal, hover, active) are what make a menu feel polished — set all three so the current page is clearly marked.
On mobile the main menu is usually replaced by the Mobile menu button block, which opens the navigation as a slide-out panel.