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

# Mega menu

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

Shopify allows you to nest menus and menu items in the Content > Menus Editor. You can build dropdown menus by creating or moving menu items so that they are “Nested” below a top-level item. Follow these steps to add Navigation:

* From your Shopify admin, go to **Content > Menus > Create menu**

<figure><img src="/files/CEtzP0ZMgjvVGyEj5IWh" alt=""><figcaption></figcaption></figure>

* Click the name of your Main menu.
* Choose one of the menu items to be the header for your dropdown menu, or add a new menu item to be the header. If you don't want the header to link to anything, then you can enter '#' in the **Link field** when you add the menu item.
* Add menu items to include in the new dropdown menu. Click **Add menu item** enter the name of the menu item, and enter or select a destination for the link.
* Click and drag the menu items to nest below the header item.
* Click the **Save menu**.

<figure><img src="/files/PPkRLPwvAm2E5WDBIGWs" alt=""><figcaption></figcaption></figure>

There are multiple types of Mega menus you can add to your store

1. Select the **Header** from the theme editor.
2. Click on "Add block.", user can create three types of blocks: Mega menu products, Mega menu submenu/gallery, Mega menu blog, Secondary menu.

## Mega menu products

Click on "Add block" and add the **Mega menu products** block.

<figure><img src="/files/qxrCP1OcJC9MM3mJMzQO" alt=""><figcaption></figcaption></figure>

Mega menu with the product allows you to add products with a submenu. Please follow the screenshot.

<figure><img src="/files/j0D7EN70LtdzP83Ghudn" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Collection</td><td>Select a collection to display products in the section.</td></tr><tr><td>Style</td><td><p>Customization of the "Style" in the featured collection section is as follows:</p><ul><li>Standard</li><li>Card</li></ul></td></tr><tr><td>Text alignment</td><td><p>Customization of the "Text alignment" in this section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Image ratio</td><td><p>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul></td></tr><tr><td>Show second image on hover</td><td>By enabling this checkbox you can “Show the second image on hover”.</td></tr><tr><td>Show vendor</td><td>By enabling this checkbox you can display the “Product vendor”.</td></tr><tr><td>Maximum products to show</td><td>"Maximum products to show" is to specify how many products to show in a section. You can show a minimum of “2” and a maximum of “8” products.</td></tr><tr><td>Card color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li></ul></td></tr></tbody></table>

{% hint style="danger" %}
Typing the same menu name in the Menu label will connect this menu to the Mega menu that is built through the theme editor. Check the below screenshot.
{% endhint %}

## Mega menu submenu/gallery

Click on "Add block" and add the **Mega menu submenu/gallery** block.

{% hint style="info" %}
**Recommendation Size**\
Megamenu gallery image size: 435x435
{% endhint %}

<figure><img src="/files/h1Sa8PL2m4USzChNYa6N" alt=""><figcaption></figcaption></figure>

This Mega menu allows you to add submenus and a gallery. Please follow the below screenshot.

<figure><img src="/files/UtgSnUDve8gKUC7f8ODx" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Image section</td><td><p><strong>Image ratio</strong><br>Product image customizations in a section are as follows:</p><ul><li>Adapt to image</li><li>Portrait</li><li>Square</li></ul><p></p><p><strong>Show image</strong></p><p>Enable this settings to show gallery image.</p><p></p><p><strong>Image</strong><br>Use "Image" to add the image to the section.</p><p><br><strong>Label</strong><br>Enter text to display as a image label in the section.</p><p></p><p><strong>Link</strong><br> Use "link" to add a link to the image in the section.<br></p></td></tr></tbody></table>

## Mega menu blog

Click on "Add block" and add the **Mega menu blog** block.

<figure><img src="/files/NmVsK9LBmCXp5fE1ENIx" alt=""><figcaption></figcaption></figure>

To add a blog, go to Blog posts > Add blog post Add Multiple Blogs.

<figure><img src="/files/m1gEz6tfO542NvFZhkjR" alt=""><figcaption></figcaption></figure>

After adding a blog, select the blog in the "Mega menu blog" block. Please follow the below screenshot.

<figure><img src="/files/KJnob9CzW70MsgQceNRZ" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a mega menu, when the mega menu is added, the link to the parent menu will not work.</td></tr><tr><td>Show submenu</td><td>By enabling this checkbox, you can show submenu.</td></tr><tr><td>Choose blog</td><td>Click on "Select blog" to show the blogs in the section and select the blog collection.</td></tr><tr><td>Maximum blog to show</td><td>"Maximum blog to show" is to specify how many blog posts to show in a section. You can show a minimum of “2” and a maximum of “4” blog posts.</td></tr></tbody></table>

## Secondary menu

Click on "Add block" and add the **Secondary menu** block.

<figure><img src="/files/qzK32DKyMewCouMpr1PC" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Secondary menu</td><td><p><strong>Secondary menu</strong></p><p>Click on "Select menu" to add a secondary menu in the header section. </p></td></tr><tr><td>First menu color</td><td>Modifying the color of the first menu.</td></tr></tbody></table>

This Mega menu allows you to add Secondary menu. Please follow the below screenshot.

<figure><img src="/files/OUGnM13GGmv5ZHCvBKvH" alt=""><figcaption></figcaption></figure>

## Menu badge

Click on "Add block" and add the **Menu badge** block.

<figure><img src="/files/g1AYmur2gzPkYBf56SLP" alt=""><figcaption></figcaption></figure>

This Mega menu allows you to add Menu badge. Please follow the below screenshot.

<figure><img src="/files/B5VoUOgCk2l7ezBRaO6v" alt=""><figcaption></figcaption></figure>

## Megamenu banner

Display promotional banners inside the mega menu to highlight featured collections, categories, products, seasonal campaigns, or special offers. Banner blocks help attract customer attention and create a visually engaging navigation experience while providing quick access to important store content.

Click on "Add block" and add the **Megamenu banner** block.

<figure><img src="/files/PeitukZDBFQTfGOfF0m0" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu Label</td><td>Enter the menu item name where the mega menu banner should be displayed.</td></tr><tr><td>Show Submenu</td><td>Enable or disable submenu links within the mega menu layout.</td></tr><tr><td>Image Ratio</td><td><p>Choose the aspect ratio used for banner images displayed in the mega menu. </p><ul><li>Adapt to image</li><li>Small</li><li>Medium</li><li>Large</li></ul></td></tr><tr><td>Image position</td><td><p>Select the position of the banner images within the mega menu layout. </p><ul><li>Beside the menu column — Displays banner images next to the submenu navigation columns.</li><li>Fullwidth</li></ul></td></tr><tr><td>First Banner</td><td><p>Configure the first promotional banner displayed within the mega menu.</p><p></p><p><strong>Enable banner</strong> </p><p>Enable or disable the first mega menu banner. </p><p></p><p><strong>Image</strong> </p><p>Select an image to display within the banner. </p><p></p><p><strong>Heading</strong> </p><p>Enter the banner heading text. </p><p></p><p><strong>Color Scheme</strong> </p><p>Select a predefined color scheme for the banner content. </p><p></p><p><strong>Label</strong> </p><p>Enter the button label displayed on the banner. Leave blank to hide the button.  </p><p></p><p><strong>Link</strong> </p><p>Select a collection, product, page, or custom URL for the banner button. </p><p></p><p><strong>Open This Link In A New Window</strong> </p><p>Open the banner link in a new browser tab or window. </p><p></p><p><strong>Style</strong> </p><p>Select the button style used for the banner call-to-action. </p><ul><li>Link — Displays the button as a simple text link with minimal styling.</li><li>Outline — Displays a transparent button with a visible border.</li><li>Solid — Displays a fully filled button for maximum visual emphasis.</li></ul></td></tr><tr><td>Second Banner</td><td><p>Display an additional promotional banner within the mega menu to feature collections, products, or marketing campaigns. </p><p></p><p><strong>Enable banner</strong> </p><p>Show or hide the second mega menu banner.</p><p></p><p><strong>Image</strong> </p><p>Upload an image for the promotional banner.</p><p></p><p><strong>Heading</strong> </p><p>Add a title or promotional message displayed on the banner.</p><p></p><p><strong>Color Scheme</strong></p><p>Choose the color scheme applied to banner content.</p><p></p><p><strong>Label</strong></p><p>Enter the button text displayed on the banner.</p><p></p><p><strong>Link</strong></p><p>Select the destination page for the banner button.</p><p></p><p><strong>Open This Link In A New Window</strong></p><p>Open the banner link in a new browser tab when clicked.</p><p></p><p><strong>Style</strong></p><p>Choose between <strong>Link</strong>, <strong>Outline</strong>, or <strong>Solid</strong> button styles for the banner call-to-action.</p></td></tr></tbody></table>

This Mega menu allows you to add Megamenu banner. Please follow the below screenshot.

<figure><img src="/files/KjErC3VIwaLaE6jUub5S" alt=""><figcaption></figcaption></figure>

## Click "Add section" and use some sections.

We are providing one special feature, You can add multiple additional sections in the header.

<figure><img src="/files/cReilczUvij6HvNuNYgV" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="201">Block</th><th>Description</th></tr></thead><tbody><tr><td>Menu label</td><td>Enter menu item to apply a menu badge.</td></tr><tr><td>Badge</td><td>Enter text to show in badge.</td></tr><tr><td>Text</td><td>In this feature, you can change the text color of badge.</td></tr><tr><td>Background</td><td>In this feature, you can change the background color of badge.</td></tr></tbody></table>