# How to add a mega menu

This page guides you through adding a mega menu on desktop. If you're looking for sidebar menu promotion blocks (mobile), read our guide for [sidebar menu promotion blocks](/guides/how-to-add-a-sidebar-menu-promotion.md).

A mega menu is a way to display dropdown links in a more visually engaging way. Use mega menu blocks when you wish to create hierarchy or draw attention to certain links on your site with imagery in addition to text.

{% columns fullWidth="false" %}
{% column %}

<figure><img src="/files/uKgGcjmebJGcDdK5sGlW" alt=""><figcaption><p>Mega menu with the horizontal header layout (<a href="https://primavera-precision.myshopify.com/">Primavera</a>)</p></figcaption></figure>
{% endcolumn %}

{% column %}

<figure><img src="/files/UmSbaF1RyjG1PHItUS5t" alt=""><figcaption><p>Mega menu with the vertical header layout (<a href="https://primavera-distinction.myshopify.com/">Savoir</a>)</p></figcaption></figure>
{% endcolumn %}
{% endcolumns %}

Follow these steps to convert a regular dropdown to a mega menu and achieve the same look as the above screenshots:

* Under **Admin > Content > Menus**, create a menu that has three levels. For example, to achieve the **Shop** mega menu for Savoir (top right), we have the following menu structure:

<figure><img src="/files/GbNECleTsagphpv6azIi" alt="The menu structure needed to achieve the mega menu on the Primavera Savoir demo store."><figcaption></figcaption></figure>

*Three-tier menu structure for the* [*Savoir demo store*](https://primavera-distinction.myshopify.com/)<br>

* In the **Customizer**, add a new **mega menu block** under **Header**:

<figure><img src="/files/Y6GbHB4LIXq8vhmmSdYL" alt="" width="291"><figcaption><p>Add a new mega menu block</p></figcaption></figure>

* Type the name of the menu item you wish to be a mega menu in the **menu item** field, e.g. "Shop". This must match exactly, including whitespace and casing. The dropdown items for this link will be used to populate the mega menu.<br>

  <figure><img src="/files/jC0WLGsr5SNhLsESmZDT" alt="A mega menu block associated with the &#x22;Shop&#x22; menu item on the Savoir demo store."><figcaption></figcaption></figure>

  \
  *Here, we're telling the Mega menu block to appear under the "Shop" menu item on the* [*Savoir demo store*](https://primavera-distinction.myshopify.com)<br>
* Choose a color scheme
* There are two different layout options for the mega menu, which only apply if an additional color scheme is used.  When the **fade** layout is selected, the mega menu will fade to match the new color scheme. When the **split** layout is applied, the mega menu will be split in half, with one half using the original color scheme and the other using the new color scheme.
* When using the **vertical** header and the **fade** mega menu, there is a chance that you may have color contrast issues with your original logo. In that case, upload a logo with a different color scheme under **Settings > Logo > Alternate logo** and enable the **use alternate logo** checkbox to switch logos when the mega menu is active.
* Add up to 3 promotion blocks. For each promotion:
  1. Image
  2. Image ratio
  3. Label
  4. Link

### Megamenu layout options

#### Megamenu with nested submenus and promo blocks

<figure><img src="/files/aoKrD9dezTZ8EDWFbb21" alt="Megamenu with nested submenus and promo blocks"><figcaption></figcaption></figure>

Choose which images, labels and text you want for your promo blocks. You can add up to three promo blocks per mega menu on desktop.

<figure><img src="/files/ZboK7RwiTRhddcSDJKSx" alt="" width="296"><figcaption><p>Settings for promo block 1</p></figcaption></figure>

#### Megamenu with nested submenus (available in v1.5.0+)

<figure><img src="/files/Ym3J0NeBbWWCCw5Pd5LR" alt="Megamenu with nested submenus"><figcaption></figcaption></figure>

If you don't add any promo blocks submenu items will be spread across several columns. Second level menu items will be the headings, and third level menu items will be grouped under the second level items.

#### Megamenu with single level menu (available in v1.5.0+)

<figure><img src="/files/rWPHa2JgswvVCzxLZS1m" alt="Megamenu with single level menu"><figcaption></figcaption></figure>

If you don't add any third level menu items, menu items will be spread across the menu. This is great for a menu with a single hierarchy of items, such as a long list of brands.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ultramarinastudios.com/guides/how-to-add-a-mega-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.