# Dropdown / Advanced Mega Menu

## How to create multi-level dropdown menu?

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FbqFaEztaU2AX56FoN8fU%2Fimage.png?alt=media&#x26;token=b1231ca7-239b-4d86-9622-29e65a2d417c" alt=""><figcaption></figcaption></figure>

1. From your Shopify admin, go to **Online Store** **->** **Navigation**.
2. Click the title of your main menu.
3. Choose one of the menu items to be the header for your drop-down 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.
4. Add menu items to include in the new drop-down menu. Click **Add menu item**, enter the name of the menu item, and enter or select a destination for the link.
5. Click and drag the menu items to nest below the header item.
6. Click **Save menu**.

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2F2tJqBVOSdPej91QWBoQz%2Fdropdown-menu.gif?alt=media\&token=8d57dfab-f942-4c04-b75e-9c6b738e8302)

{% hint style="info" %}
For more information, see [Shopify Navigation Tutorial 2018 How to Create Drop Down Menus](https://www.youtube.com/watch?v=B_b0KEEa9sY).
{% endhint %}

## How to setup Mega menu?

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fg6QhlXEUVGEgomDEQLQs%2Fimage.png?alt=media&#x26;token=5db18c26-64d2-4292-9d6e-0bb60ebe6897" alt=""><figcaption></figcaption></figure>

For the instruction how to set up Mega Menu, please refer to the video below:

// Import the video link to setting-up-mega-menu

1. To show mega menu layouts, you need to [create multi-level dropdown menu](#how-to-create-multi-level-dropdown-menu) first.
2. From your Shopify admin, go to **Online Store** -> **Themes**.
3. Find the theme that you want to edit, and then click **Customize**.
4. In the **Header section** on the left editor window, turn on **Show Mega Menu**.
5. After that, you need to add block for Header section. Select block type is "**Mega Menu**".

{% embed url="<https://www.youtube.com/embed/Y2xRtJOArdk>" %}

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fys6UmVBg7qtRAN1w1pOr%2F107.jpg?alt=media\&token=0ac6fa91-3626-43c2-9610-58d8a10d2c67)

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2Fj9C07Q4t834ya35DKCi1%2Fimage.png?alt=media&#x26;token=2a7de6f6-3501-4df1-a8d8-35da31f90370" alt=""><figcaption></figcaption></figure>

#### Put <mark style="color:red;">the name of collection</mark> on navigation which you want to apply <mark style="color:red;">mega menu layout</mark> for it into the text box: <mark style="color:red;">Mega Menu Item</mark>

<figure><img src="https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FSZRaaq97Nqz3qO02bBl6%2Fimage.png?alt=media&#x26;token=e8c16253-1b80-4ad4-9c11-db2eeee953d8" alt=""><figcaption></figcaption></figure>

![](https://3875480980-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F8KVBTL14Wsr30Mq5W8PK%2Fuploads%2FiD16FqfjjNQkmUbWWCbH%2F110.jpg?alt=media\&token=e91a3fca-aea7-4704-bf39-9a3c4fd145e7)