# Mega menu

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

<figure><img src="/files/T0EEM0rLMeG9ErBRdHpp" 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="/files/YXBHClmuIdzmicYniTsL" 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="/files/A9FbWlRostJwuTyfTwLV" 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="/files/q8NasRSgSp33jXXlXyn7" 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="/files/VVH1WjRXgStV82oUYOCZ" alt=""><figcaption></figcaption></figure>

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

<img src="/files/4vJaJfyKvO1xmUKvkOxO" 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=help_center_sleek_mega_menu\&utm_campaign=anchor_text\&utm_term=sleek_demo_jumped) :star:

### Menu item - Presets

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

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

### Menu item - Shop

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

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

### Menu item - Collections

Block name: **Banner**

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/sleek-theme/pages-global-sections/header/mega-menu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.