> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/viola-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/viola-documentation/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 **Online Store > Content > Menus > Create menu**.

<figure><img src="/files/8pVjJLZObXXEcCN8JYIH" 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/Rd0jybWA5H9RXlFfQ4Qi" 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 product, Mega menu submenu/gallery, Mega menu blog

### Mega menu product

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

<figure><img src="/files/6tY0Rgm6bngfkyR4FDhz" 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/zJPpdU0asuUiahswBp5R" 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 %}

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

### Mega menu submenu/gallery

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

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

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

{% hint style="info" %}
**Recommendation Size**\
Image gallery size: 400x197&#x20;
{% endhint %}

<figure><img src="/files/0ffXxktwk5xdfGbJhJOq" alt=""><figcaption></figcaption></figure>

* To a add submenu, go to **Online Store > Content > Menus**
* Click the name of your **Main menu**.
* 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/SwdJBTHFT2lKLN9ujtUJ" alt=""><figcaption></figcaption></figure>

### Mega menu blog

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

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

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

<figure><img src="/files/9TAkFQU0LN2kaBXxOZLl" 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/rq22vCBzJ6YADCmubMTN" alt=""><figcaption></figcaption></figure>

### Menu badge

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

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

After adding a badge, select the badge in the "Menu badge" block. Please follow the below screenshot.

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

### Collections with banner

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

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

This Mega menu allows you to add Collections with banners. Please follow the below screenshot.

<figure><img src="/files/XzafUd3MDos0fpvOQGXj" 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/N2cigLeZ4rKDYVpaWwaU" alt=""><figcaption></figcaption></figure>