> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/section-groups/header/icon-menu/menu-item/mega-menu.md).

# Mega menu

This block helps to build the drop-down menu for the parent navigation links.

{% hint style="success" %}
**Tip:** Add a block for each top menu item by pressing **"Add block"** within the "**Menu item"**.
{% endhint %}

The "Mega menu" offers supplementary blocks: "[<mark style="color:blue;">Badges</mark>](#badges)", "[<mark style="color:blue;">Custom HTML</mark>](#custom-html)", "[<mark style="color:blue;">Empty column</mark>](#empty-column)", "[<mark style="color:blue;">Image with button</mark>](#image-with-button)", "[<mark style="color:blue;">Menu</mark>](#menu)", and "[<mark style="color:blue;">Promotion</mark>](#promotion)".

{% hint style="success" %}
**Tip:** Press **"Add block"**, then select the desired block under **Blocks**.\
Drag and drop each block to the desired position in a drop-down section.\
The blocks can be added multiple times to display various content.
{% endhint %}

{% hint style="warning" %}
**Note!** If you use multiple blocks to build Mega menus, keep the order in which you add parent links within blocks consistent with their placement in the header.
{% endhint %}

***

## Badges

### Badge

Use the block to add badges to the menu items in the drop-down.

**Text**\
In this field, insert the badge's name, for example, "Sale", "New In", "Hot", etc.

**Background / Text**\
The background and text colors can be changed in the respective color pickers.

### For item

Add the block to assign a badge to a specific menu item.

**For item**\
Link a menu item with a badge by placing its name in the field.&#x20;

***

## Custom HTML

**Code**\
Use the input field to paste your HTML code to display the desired content in the drop-down.

***

## Empty column

Add the block to place an extra space between columns.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FbJkrJUtG9CbPM3a9l1vQ%2Fmega%20menu_empty%20column.png?alt=media&amp;token=87e24635-b2de-45cf-b650-96a8ae5b6661" alt=""><figcaption></figcaption></figure>

***

## Image with button

Use the block to display a banner in a separate column.

#### **Click action**

**Link**\
The image and button can be linked to any page by selecting or pasting a page URL in the current source selector.

#### **Image**

**Image**\
Click **"Select"** to choose media from the library or upload it from your computer.

### Button

{% hint style="success" %}
**Tip:** Press **"Add block"** to add a button.\
Add several blocks if required.
{% endhint %}

**Label**\
Fill in the field to title the call-to-action button.

**Position**\
Define the button's position overlaid on a banner: "Top left", "Top", "Top right"; "Center left", "Center", "Center right"; or "Bottom left", "Bottom", "Bottom right".&#x20;

**Color**\
Use the picker to set the desired button background color.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2F6eUa2Cu9VFRUCoGR2Xrg%2Fmega%20menu_image%20with%20bttn.png?alt=media&amp;token=e7adcfe5-9336-45ff-a9b0-e4d2845ec578" alt=""><figcaption></figcaption></figure>

***

## Menu

Use the block to show a menu column in the drop-down. Optionally, an image for the menu column can be added.

{% hint style="warning" %}
**Note!** This block allows displaying only a one-level menu.
{% endhint %}

Before starting any configurations in the block, ensure the menu is added under your *Shopify admin -> Content -> Menus*. Read the step-by-step instructions on how to create a menu in the following [<mark style="color:blue;">article</mark>](https://help.shopify.com/en/manual/online-store/menus-and-links).

**Menu**\
Once the menu is created in the admin, link it in the source selector.

#### Heading

**Show**\
Enable the option to direct customers to the required page when pressing the parent link or image.

**Link**\
Choose a destination in the source selector or paste an external link.

#### Image

**Image**\
Click **"Select"** to choose media from the library or upload it from your computer. Selecting an image in the source selector activates the next option.

**Position**\
The image you chose as a banner for the menu column can be displayed "Before title" or "After title".

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2Fvyn8SiWYM8OdZ2FYiyCy%2Fmega%20menu_menu.png?alt=media&amp;token=d26216ac-094d-47bc-b7ea-7628cf4d9d43" alt=""><figcaption></figcaption></figure>

***

## Promotion

Use this block to add a marketing banner with promotional content to a dropdown menu. Supported on desktop screens only.

#### Click action

**Link**\
Text and an image can be linked to any page using the source selector.

**Alignment**\
Change the heading position to the left or center.

{% hint style="success" %}
**Tip:** Add the content by using the provided blocks: "Button", "Heading", and "Media".\
Press **"Add block"** to use the desired block.
{% endhint %}

### Button

**Label**\
Fill in the field to title the call-to-action button. It displays below the heading.

**Link**\
Choose a destination in the source selector or paste an external link.

**Style**\
Select the desired style in the drop-down: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#buttons).

**Color**\
Applies color settings according to the selected button style:

* **"Primary"**. Changes the button background color.
* **"Secondary"**. Colorizes the text and border.
* **"Link style"**. Changes the text color.

### Heading

**Heading**\
Type the title in the field.

**Size**\
Use the drop-down to select the heading size: "Extra large", "Large", "Medium", or "Small".

**Color**\
Select the color or paste your hex code.

### Media

**Image**\
Click **"Select"** to choose media from the library or upload it from your computer.

<figure><img src="https://2943342198-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FysL5Hr1ZCl3x5RHWgJ3m%2Fuploads%2FIwFULy1t1LR0lmbz9UtI%2Fmega%20menu_promotion.png?alt=media&amp;token=c94d6d11-8e6c-43f3-99ae-800b44249a4f" alt=""><figcaption></figcaption></figure>