# Mega menu

{% embed url="<https://youtu.be/ou98y9G1x4Q>" %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FAspyzpfBsLeB4hfZsZjM%2Fimage.png?alt=media&#x26;token=ec59b7eb-b131-4b2d-aa7b-ada2f026b5f8" alt=""><figcaption></figcaption></figure>

In addition to standard dropdown menus, Sleek offers a mega-menu feature.&#x20;

The mega-menu lets you present your menu in a more detailed and visually appealing format.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FCUsSjb0C17R7p2e4MiL1%2Flivechat883x471%20(1).png?alt=media&#x26;token=1ad5a821-413a-4e9b-a7f5-850fc173bcd3" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_sleek&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>

***

## How to Set up a mega menu

In Sleek, you can add banners, custom cards, and/ or a product list to the menu.&#x20;

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

1. In the theme editor (**Customize**), locate the **Header** section.
2. Click **Add block**, then select the add-on type you want for your menu.
3. Make necessary changes.
4. Click **Save**.
   {% endhint %}

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FIyrtpIzWLPnIkxnda2TI%2Fimage.png?alt=media&#x26;token=ef666773-7cb6-43b5-8f2e-3cf46f6b76db" alt=""><figcaption></figcaption></figure>

## Block settings

* **Menu item**: enter the **exact first-level menu item name** you want to add the banner to.&#x20;

For instance, in our example, the mega-menu is contained within the "Pages" link, so we need to enter "Pages":

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FPKSI1bxmQ0NlSu5PeveB%2Fimage.png?alt=media&#x26;token=d6dbdffe-3fb6-4297-909a-c7aefd21a885" alt=""><figcaption></figcaption></figure>

* **Menu columns**: between 2 and 6 columns.
* **Banners settings**: You can **add up to 5 banners** under one main menu item.
  * Width: 30-100 px.
  * Number of banner columns: 1-5 columns.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F3XkKATEg6PtBWffG6R6E%2Fimage.png?alt=media&#x26;token=6f4ff884-e18c-4178-9891-bde35fdaaaac" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Expert Tip :bulb:Mega menu works best with menus having 3-level menu items.

<img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Flvwov4d7AdTAfk1QROAH%2Fimage.png?alt=media&#x26;token=909ee83e-7b84-4d9c-bec7-068206eb2c6a" alt="" data-size="original">
{% endhint %}

## Demo store reference

Below is how we customize our mega menu in :star: [Sleek demo Jumped](https://themes.shopify.com/themes/sleek/presets/jumped?utm_source=foxecom\&utm_medium=mega_menu\&utm_campaign=anchor_text\&utm_term=Sleek_demo_Jumped) :star:

### Menu item - Presets

Block name: **Custom card**&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FLleJ6Ep7qc0gdBWKNSAK%2Fimage.png?alt=media&#x26;token=3953fc01-57b4-4626-a889-b4a819f55bb0" alt=""><figcaption></figcaption></figure>

### Menu item - Shop

Block name: **Product list**&#x20;

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FyijSzYdpv1xyH9TWLrly%2Fimage.png?alt=media&#x26;token=8b1c5ced-7233-4a82-b00d-f1667f6926c7" alt=""><figcaption></figcaption></figure>

### Menu item - Collections

Block name: **Banner**

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FGBRQANmMtQxMG40sx3N5%2Fimage.png?alt=media&#x26;token=e701a45a-b603-4524-b573-3017d1b3d68b" alt=""><figcaption></figcaption></figure>