> 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/mobile-menu/menu.md).

# Menu Block

The **Menu** block is the navigation list in the mobile menu. Beyond standard links, you can add a **product list**, **banners**, or **collection images** to specific menu items — they appear when a shopper expands that item.

These are added as child blocks of the **Menu** block, inside the **Mobile menu** section in the theme editor.

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

***

## Mega menu: Product list

The **Mega menu: Product list** block adds a product grid under a menu item when a shopper expands it.

![Mobile menu product list block in the theme editor](/files/ovuZjLdKUnYjF5CmhQTM)

### Settings

| Setting                                       | Description                                                                    |
| --------------------------------------------- | ------------------------------------------------------------------------------ |
| **Menu item name**                            | The navigation item this block applies to. Separate multiple names with commas |
| **Highlight menu item**                       | Adds a colored highlight to the menu item label                                |
| **Color**                                     | Color used for the highlight (shown when **Highlight menu item** is on)        |
| **Products**                                  | The products to display                                                        |
| **Columns**                                   | Number of product columns                                                      |
| **Horizontal gap** / **Vertical gap**         | Spacing between product cards                                                  |
| **Heading** / **Heading size**                | Optional heading above the product list                                        |
| **Collections**                               | Featured collections shown as image links                                      |
| **Font** / **Font size** / **Letter spacing** | Typography for the featured collection labels                                  |
| **Image ratio**                               | Aspect ratio for collection images                                             |
| **Show second-level menu images**             | Show a collection image next to each second-level link                         |
| **Show third-level menu images**              | Show a collection image next to each third-level link                          |
| **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. In the theme editor, open the **Mobile menu** section and select the **Menu** block.
2. Click **Add block** and select **Mega menu: Product list**.
3. In **Menu item name**, enter the navigation item (e.g., `New arrivals`).
4. Select the products to show.
5. Click **Save**.

***

## Mega menu: Banners

The **Mega menu: Banners** block adds image banners and featured collections under a menu item.

![Mobile menu banners block in the theme editor](/files/1EkvzH2sHNJXjmQLP5p6)

### Settings

| Setting                                       | Description                                                                    |
| --------------------------------------------- | ------------------------------------------------------------------------------ |
| **Menu item name**                            | The navigation item this block applies to. Separate multiple names with commas |
| **Highlight menu item**                       | Adds a colored highlight to the menu item label                                |
| **Color**                                     | Color used for the highlight (shown when **Highlight menu item** is on)        |
| **Collections**                               | Featured collections shown as image links                                      |
| **Font** / **Font size** / **Letter spacing** | Typography for the featured collection labels                                  |
| **Image ratio**                               | Aspect ratio for collection images                                             |
| **Show second-level menu images**             | Show a collection image next to each second-level link                         |
| **Show third-level menu images**              | Show a collection image next to each third-level link                          |
| **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, and label.

### How to set it up

1. In the theme editor, open the **Mobile menu** section and select the **Menu** block.
2. Click **Add block** and select **Mega menu: Banners**.
3. In **Menu item name**, enter the navigation item (e.g., `Collections`).
4. Add **Mega menu: Banner** child blocks and/or select **Collections** to feature.
5. Click **Save**.

***

## Mega menu: Collection images

Shows a thumbnail image — or a color swatch — next to collection links under a menu item, without adding banners or a product grid.

![Mobile menu collection images block in the theme editor](/files/wpDVoxiMsMMs7yiAnYyW)

{% 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 navigation item this block applies to. Separate multiple names with commas |
| **Image ratio**                   | Aspect ratio for collection images                                             |
| **Show second-level menu images** | Show a collection image next to each second-level link                         |
| **Show third-level menu images**  | Show a collection image next to each third-level link                          |
| **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                           |

***

## Collection images and colors

The **Mega menu: Collection images**, **Mega menu: Banners**, and **Mega menu: 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. The mobile menu blocks carry their own setting, so the mobile thumbnails can be shaped differently from the desktop mega menu.

{% 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

The **Highlight menu item** block applies a custom color to a navigation item label — useful for drawing attention to items like "Sale" or "New arrivals".

![Mobile menu highlight menu item block in the theme editor](/files/N8nTlKXslA17NQQ2CqL2)

### Settings

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

### How to set it up

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