Mega Menu

The Mega Menu transforms your navigation into a rich, visual experience. Instead of a simple dropdown, it displays a wide panel with link columns, images, featured products, and promotional banners.

Enabling the mega menu

The mega menu is configured in the Header settings:

The 3 mega menu styles

1. Columns

The default style. Each top-level item in the Shopify menu becomes a column heading. Sub-items are displayed as a list under each heading.

How it works:

• Level 2 menu items become the column headings
• Level 3 items become the links under each heading
• A maximum of 8 links per column are displayed (beyond that, a "View all" link appears)

Rich content (sidebar):

• Image blocks and/or collection product blocks can be added to the right or left of the columns
• The sidebar position (left, right, top, bottom) is configurable per block

2. Tabs

The top-level menu items are displayed as clickable tabs at the top of the mega menu. Clicking a tab shows the content for that category.

and the selected tab's content below)

How it works:

• Each top-level item with sub-items becomes a tab
• The active tab (the one hovered in the menu) is selected by default
• Smooth transition animation between tabs (fade + slide)
• Each tab can have its own rich content blocks (images, collections)

3. Full

All main menu items are displayed simultaneously in a wide grid. Each top-level category is a block with its subcategories.

How it works:

• All menu items are visible simultaneously
• Top-level items are category headings
• Second-level items are subcategories
• Third-level items are links (max 5 per subcategory)
• Image blocks without a specific trigger are displayed as a global sidebar

Rich content blocks

The mega menu supports 3 types of blocks that you can add via the Shopify editor in the Header section:

Image block

Adds a clickable image with title, subtitle, and CTA button to the mega menu.

Image sizes

Image ratios

Image position

The position determines where the image block appears relative to the link columns:

Collection block

Displays products from a collection directly in the mega menu. Ideal for featuring your best-sellers or new arrivals.

Each product displays:

• Thumbnail image (150px)
• Product title (truncated to 30 characters)
• Price

Banner block

Adds a full-width promotional banner to the top or bottom of the mega menu. Perfect for special offers and announcements.

Mega menu trigger

Hover

The mega menu appears when the cursor hovers over a top-level item. It disappears with a slight delay (250ms) when the cursor leaves the area, to prevent accidental closures.

Click

The mega menu opens and closes on click on the menu item. This mode is better suited for touch screens and users who prefer explicit control.

Animation

• Fade: The mega menu appears with a simple fade
• Fade + Slide: The mega menu appears with a fade and a slight top-to-bottom movement (more dynamic)

Mobile behavior

On mobile, the mega menu does not exist as such. Submenus are displayed in the mobile drawer with two possible modes:

Accordion

Sublevels expand in place. An arrow indicates items with children. The animation is smooth thanks to grid-template-rows.

Drilldown

Page-by-page navigation: clicking an item with children slides in a new "page" of links. A "Back" button at the top allows navigating back.

"View all" link

When enabled, a "View all ->" link appears:

• Under each column that has more than 8 links (Columns and Tabs styles)
• Under each subcategory that has more than 5 links (Full style)
• At the bottom of each category (Full style)

Shopify menu structure

For the mega menu to work correctly, your Shopify menu must be structured with 3 levels:

Level 1: Women                <-- Column title / tab
  Level 2: Tops               <-- Subsection title
    Level 3: T-shirts          <-- Individual links
    Level 3: Shirts
    Level 3: Sweaters
  Level 2: Bottoms
    Level 3: Jeans
    Level 3: Skirts
    Level 3: Pants

Configuration examples

Fashion store

• Style: Columns
• Image blocks: 1 "New collection" image on the right for each category
• Bottom banner: "Free shipping from $50"

Tech store

• Style: Tabs
• One tab per category (PC, Mobile, Audio, Gaming)
• Collection block with best-sellers in each tab

Single-product store

• Style: Full
• Few categories, all visible at once
• Global images for current promotions

Settings summary