# 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 **Online Store > Content > Menus > Create menu**.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FvfrRrasZMPpiEBcmWDEF%2Fs2.png?alt=media&#x26;token=221a3736-4768-44f7-965c-2dc78bc97e8e" 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="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FcAJlIpehMvHX2jd4LOiB%2Fs3.png?alt=media&#x26;token=7c14de32-c1ba-4c75-a974-db2712cf9d5e" 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 with products

Click on "Add block" and add the **Menu with products** block.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fm78JeMfxQVQH96RQCd0h%2Fmegamenu-product.png?alt=media&#x26;token=a113f1ac-3eca-44cd-9c50-ecdb5de37db2" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FpfbC6vuM1o816dapoZ7J%2Fmegamenu-product-block.png?alt=media&#x26;token=6e541849-9f26-41dd-abcf-0f702fd79d4b" alt=""><figcaption></figcaption></figure>

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

Click on "Add block" and add the **Menu with banner** block.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2Fxspq3F102bFK9ejmthtF%2Fmegamenu-banner.png?alt=media&#x26;token=bcc7dc72-bb55-40e6-98bb-9c06ae2949a4" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FiqzU2cqzw3QjBOAxiM1s%2Fmegamenu-banner-block.png?alt=media&#x26;token=2a28b771-7b58-42c5-ae92-03b1ba6f2acc" alt=""><figcaption></figcaption></figure>

## Mega menu collection with info

Click on "Add block" and add the **Menu with collections** block.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FzhsWEptQzHN9m9OdqaMn%2Fmegamenu-collection.png?alt=media&#x26;token=74c5e055-dda6-4d9e-9461-8affc1b42d59" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2F8QasJyNgOH6UgVwgTNG4%2Fmegamenu-collection-icons.png?alt=media&#x26;token=c904fb48-ad1e-41c1-931f-c5a127c96e1e" alt=""><figcaption></figcaption></figure>

## Mega menu with tab collections

Click on "Add block" and add the **Mega menu with tab collections** block.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FTczwuCGH5rbeXD4Ii9vh%2Fmegamenu-tab-collection.png?alt=media&#x26;token=57b24f54-7e47-4a5c-a056-9fb7ab855db2" alt=""><figcaption></figcaption></figure>



This Mega menu allows you to add tab-collections. Please follow the below screenshot.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FbNQRlhZsh4HHbQXh9sDe%2Fmegamenu-tab-coll-block.png?alt=media&#x26;token=2f1e6334-92a4-4e49-9527-15e05f1a3166" alt=""><figcaption></figcaption></figure>



## Highlighted link

Click on "Add block" and add the **Highlighted link** block.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FEMCXU55p4aVOfdjFXQaE%2Fmegamenu-heighlightlink.png?alt=media&#x26;token=9572f0ac-ffdb-4cbc-97d1-a66382887197" alt=""><figcaption></figcaption></figure>



This Mega menu block allows you to highlight main menu link. Please follow the below screenshot.

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FB1sBSYbAqdRoMuvbJsGJ%2Fmegamenu-heightlight-block.png?alt=media&#x26;token=e46f270d-e5b0-4cad-9aac-09b361564ea9" alt=""><figcaption></figcaption></figure>

## Secondary menu

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

<figure><img src="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FvNKHBAz6tS2HjLPigjhD%2Fmegamenu-secondarymenu.png?alt=media&#x26;token=9471336b-59af-4ac8-83ad-651b02789af4" 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="https://895706505-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0PKM9UHryXjPN3UYSTy0%2Fuploads%2FJCZnIrp73MgiF1WZ0K5F%2Fheader-sections.png?alt=media&#x26;token=c1bca9fa-e87f-4af6-9801-f8bfeb5a77dc" alt=""><figcaption></figcaption></figure>
