> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/header-group/header/mega-menu.md).

# Mega menu

A mega menu turns a menu item's dropdown into a wider panel that can include extra submenu columns, image banners, or a product list. When a customer opens that menu item, the panel drops down alongside the normal submenu links.

Mega menu blocks are added as child blocks of the **Menu** block in the **Header** section. Each block targets one or more menu items by name.

{% hint style="info" %}
The **Menu item name** field matches by name and ignores capitalisation. Target several items at once by separating their names with commas (e.g., `Women, Men`).
{% endhint %}

***

## Mega menu: Collection images

Turns a menu item's dropdown into a wider, multi-column submenu, without banners or products. Use it when you just want a bigger submenu — optionally with a collection image next to each link.

![Mega menu collection images block in the theme editor](/files/gepLvsZ1b2rsz7iudN4f)

{% hint style="info" %}
This block appears as **Mega menu: Collection images** in the **Add block** picker, but its title reads **Mega menu** once added.
{% endhint %}

### Settings

| Setting                           | Description                                                              |
| --------------------------------- | ------------------------------------------------------------------------ |
| **Menu item name**                | The menu item this block applies to. Separate multiple names with commas |
| **Columns**                       | Number of columns for the submenu links                                  |
| **Limit width**                   | Constrain the panel to a maximum width                                   |
| **Max width**                     | Maximum width of the panel (shown when **Limit width** is on)            |
| **Show second-level menu images** | Show a collection image next to each second-level link                   |
| **Second-level image ratio**      | Aspect ratio for those images                                            |
| **Show third-level menu images**  | Show a collection image next to each third-level link                    |
| **Third-level image ratio**       | Aspect ratio for those images                                            |
| **Show third-level menu colors**  | Show a color swatch next to each third-level link                        |
| **Corner radius**                 | Rounding of the collection images shown next to the submenu links        |
| **Custom corner radius**          | The exact rounding, when **Corner radius** is Custom                     |

### How to set it up

1. Open the **Header** section and select the **Menu** block.
2. Click **Add block** and choose **Mega menu: Collection images**.
3. In **Menu item name**, enter the menu item as it appears in your navigation (e.g., `shop`).
4. Set the number of **Columns** for the submenu links.
5. Click **Save**.

***

## Mega menu: Banners

Shows a set of image banners next to the submenu for a menu item.

![Mega menu banners block in the theme editor](/files/PdivXSXwXdnVJgH2FUP4)

### Settings

| Setting                            | Description                                                              |
| ---------------------------------- | ------------------------------------------------------------------------ |
| **Menu item name**                 | The menu item this block applies to. Separate multiple names with commas |
| **Highlight menu item**            | Adds a colored highlight to the menu item label                          |
| **Color**                          | Highlight color (shown when **Highlight menu item** is on)               |
| **Width**                          | Width of the banner area                                                 |
| **Gap**                            | Spacing between banners                                                  |
| **Layout**                         | Arrange banners in a row or a column                                     |
| **Columns**                        | Number of columns for the text submenu links                             |
| **Limit width** / **Max width**    | Constrain the panel to a maximum width                                   |
| **Featured collections**           | Collections shown as image links in the submenu                          |
| **Featured collection typography** | Font, size, and letter spacing for the featured collection labels        |
| **Show second-level menu images**  | Show a collection image next to each second-level link                   |
| **Second-level image ratio**       | Aspect ratio for those images                                            |
| **Show third-level menu images**   | Show a collection image next to each third-level link                    |
| **Third-level image ratio**        | Aspect ratio for those images                                            |
| **Show third-level menu colors**   | Show a color swatch next to each third-level link                        |
| **Corner radius**                  | Rounding of the collection images shown next to the submenu links        |
| **Custom corner radius**           | The exact rounding, when **Corner radius** is Custom                     |

Each banner is a **Mega menu: Banner** child block with its own image, link, heading, text, and button.

### How to set it up

1. Open the **Header** section and select the **Menu** block.
2. Click **Add block** and choose **Mega menu: Banners**.
3. In **Menu item name**, enter the menu item as it appears in your navigation (e.g., `Women`).
4. Add **Mega menu: Banner** child blocks and give each one an image and link.
5. Click **Save**.

***

## Mega menu: Product list

Shows a product grid next to the submenu for a menu item.

![Mega menu product list block in the theme editor](/files/5bhQqMNfkRQ9NY6Z3wFP)

### Settings

| Setting                            | Description                                                              |
| ---------------------------------- | ------------------------------------------------------------------------ |
| **Menu item name**                 | The menu item this block applies to. Separate multiple names with commas |
| **Highlight menu item**            | Adds a colored highlight to the menu item label                          |
| **Color**                          | Highlight color (shown when **Highlight menu item** is on)               |
| **Products**                       | The products to show                                                     |
| **Columns**                        | Number of product columns                                                |
| **Width**                          | Width of the product area                                                |
| **Limit width** / **Max width**    | Constrain the product area to a maximum width                            |
| **Gap**                            | Spacing between products                                                 |
| **Heading** / **Heading size**     | Optional heading shown above the products                                |
| **Featured collections**           | Collections shown as image links in the submenu                          |
| **Featured collection typography** | Font, size, and letter spacing for the featured collection labels        |
| **Show second-level menu images**  | Show a collection image next to each second-level link                   |
| **Second-level image ratio**       | Aspect ratio for those images                                            |
| **Show third-level menu images**   | Show a collection image next to each third-level link                    |
| **Third-level image ratio**        | Aspect ratio for those images                                            |
| **Show third-level menu colors**   | Show a color swatch next to each third-level link                        |
| **Corner radius**                  | Rounding of the collection images shown next to the submenu links        |
| **Custom corner radius**           | The exact rounding, when **Corner radius** is Custom                     |

### How to set it up

1. Open the **Header** section and select the **Menu** block.
2. Click **Add block** and choose **Mega menu: Product list**.
3. In **Menu item name**, enter the menu item (e.g., `Men`).
4. Select the products to show.
5. Click **Save**.

***

## Collection images and colors

The **Collection images**, **Banners**, and **Product list** blocks can show a thumbnail image or a color swatch next to second- and third-level collection links. These come from the `modutheme.menu_image` and `modutheme.menu_color` collection metafields, so each collection sets its own menu image and swatch.

Turn on **Show second-level menu images**, **Show third-level menu images**, or **Show third-level menu colors** on the block, then set the values on each collection.

**Corner radius** shapes those thumbnails. Left on **Inherit** they follow the media rounding from your theme settings; set it per block when a menu needs squared-off or fully circular thumbnails instead.

![Mega menu with collection images and color swatches next to links](/files/R5Gl4sdWh430RqieeA7D)

{% hint style="info" %}
To change the image a collection shows in the menu, see [How to override collection menu images](/helix/how-to-guides/how-to-override-collection-menu-images.md).
{% endhint %}

{% hint style="info" %}
To add a color swatch to a collection link, see [How to show colors for collection menu items](/helix/how-to-guides/how-to-show-colors-for-collection-menu-items.md).
{% endhint %}

***

## Highlight menu item

Applies a custom color to a menu item label — useful for items like "Sale" or "New arrivals" — without changing the menu structure.

![Highlight menu item block in the theme editor](/files/Wz3AfOGaHp71piYymmcw)

### Settings

| Setting            | Description                                                     |
| ------------------ | --------------------------------------------------------------- |
| **Menu item name** | The menu item to highlight. Separate multiple names with commas |
| **Color**          | The highlight color applied to the label                        |

### How to set it up

1. Open the **Header** section and select the **Menu** block.
2. Click **Add block** and choose **Highlight menu item**.
3. In **Menu item name**, enter the item as it appears in your navigation (e.g., `Sale`).
4. Set the **Color**.
5. Click **Save**.