> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/ella-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/ella-documentation/header/set-up-advanced-mega-menu-drop-down-menu.md).

# Set up Advanced Mega Menu/ Drop Down Menu

## How to create multi-level dropdown menu?

![](/files/2HdNzxPNFJrtGaY5ZM3h)

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

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**.

{% 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 layouts (Advanced Mega Menu)?

{% embed url="<https://www.youtube.com/watch?v=moikHlMmCjs>" %}
This video for Ella from version 6.0.0 to 6.4.0
{% endembed %}

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 -> Click **+ Add block**.
5. Select block type is "**Mega Menu**".

<figure><img src="/files/5siBWLCoCnf0RIm30Xdw" 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>

![](/files/HX8e1xL8D60pIe5VT8Jt)

![](/files/1ecwgOwPsIRGDJAQ5d1A)