# Menu

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FhVgOBY7WHW1ZxLCPbwan%2FHelp%20Center%20(1).jpg?alt=media&#x26;token=da0189bb-6cbb-4d1e-9a52-083eb5cab5bd" alt=""><figcaption><p><a href="https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom&#x26;utm_medium=helpcenter&#x26;utm_campaign=foxtransfer_launch">Install FoxTransfer Chrome Extension FREE here</a></p></figcaption></figure>

***

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FSWJoEW6gO3y8mezZlcRF%2FFox-BG%20Light%20(8).jpg?alt=media&#x26;token=04c1115b-031d-4224-a3d0-2536b81660d4" alt=""><figcaption></figcaption></figure>

Customers navigate your online store using the links on pages and menus. Different websites require different kinds of menus, depending on the size, nature, and objectives of your store.&#x20;

## What are a menu, drop-down menu, and mega menu?

You can add menu items to your online store menus to build your store's navigation. Menu items are links to products, collections, webpages, blog posts, policies, or other websites.

**A drop-down menu**: a drop‑down menu with multiple levels and can include rich content like banners, custom cards, or collections.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2Fj8HkpSbdbJVLT0YuWTe0%2Fimage.png?alt=media&#x26;token=2b35e96c-8078-40db-82ff-6d0a0e8f32f3" alt=""><figcaption><p>An example of a dropdown menu</p></figcaption></figure>

**A mega menu**: a drop‑down menu with multiple levels and can include rich content like banners, custom cards, or collections.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FqUVFYrHycwz1sly7RJjX%2Fimage.png?alt=media&#x26;token=ee0eb6df-d0c6-4081-bba9-45b683786223" alt=""><figcaption><p>An example of a mega menu with a banner</p></figcaption></figure>

### When to use a mega menu?

Use a mega‑menu when your store has many products or categories, or you want to showcase banners, images, or collections under your main menu item. It improves navigation clarity on large catalogs.

## How to create a menu

{% stepper %}
{% step %}
From Shopify admin, navigate to **Content > Menus**.
{% endstep %}

{% step %}
Choose an existing menu to edit or click **Create menu** to add a new one.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FOACmjFHkFWwzHdb666H3%2Fimage.png?alt=media&#x26;token=0b539958-da79-4c44-8b21-a48fcf5bcc85" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Give the menu a name and click **Add menu item.**

* Enter the name (what appears on the menu)
* Select destination (Product, Collection, Page, Blog, etc.) or enter external URL.&#x20;

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F83eOsKsMHUseQm94wkoL%2Fimage.png?alt=media&#x26;token=792cc894-91b1-4bc3-9012-11829a0ada96" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
To create a sub‑menu (drop‑down), drag items under a top‑level item and indent.

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2F3a25WniqmI9YtQJtBTWv%2Fimage.png?alt=media&#x26;token=dd1634e7-c071-400b-8881-51607072d13a" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Rearrange menu items by dragging them into desired order.
{% endstep %}

{% step %}
When done, click **Save.**
{% endstep %}
{% endstepper %}

{% hint style="info" %}
A menu with 3rd-level nested items is recommended for the mega menu.

![](https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FYDmQozPYdYiEl0ya1URU%2Fimage.png?alt=media\&token=abe5dc2c-0651-475f-a645-cc90e74b37d9)
{% endhint %}

## How to apply your menu to Zest header

{% hint style="success" %}
Steps:

1. From Shopify admin, go to **Online Store > Themes** and click **Customize**.
2. In the theme editor, locate the **Header** section.
3. In the header settings, select which menu to show in the navigation.
4. If using mega‑menu features (banners, custom cards, etc.), configure those sub‑settings here.&#x20;

Learn more:[add-a-banner-to-mega-menu](https://docs.foxecom.com/zest-theme/pages-global-sections/menu/add-a-banner-to-mega-menu "mention")

5. **Save** the changes.
   {% endhint %}

<figure><img src="https://1836495117-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOdebKCa6IK9qfbdvSKj0%2Fuploads%2FbkWJt9oQXJzllmb2HfvS%2Fimage.png?alt=media&#x26;token=f0a7c763-f80b-445e-bf68-37dcaaa94291" alt=""><figcaption></figcaption></figure>
