# Custom Mega Menu

**Mega Menu** is an **advanced navigation menu** designed to display **multi-level content** on a website. Unlike traditional dropdown menus, **Mega Menus** typically expand in a **larger panel format**, allowing **multiple options and categories** to be displayed simultaneously. This enables users to **quickly browse and access more content**. A **custom Mega Menu** can achieve effects like the example shown below, with support for adding **images**.

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

### **Steps to achieve the effect shown above:**

**Step 1: Add a Custom Mega Menu**

<figure><img src="/files/6636H1oRUlstlVPjbscE" alt=""><figcaption></figcaption></figure>

**Step 2: Bind to the Main Menu**

Select the main menu index. The example below binds to the **second main menu**.

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

**Step 3: Select a Submenu**

Choose the menu and configure its alignment. In this example, the menu is **center-aligned**.

{% hint style="warning" %}
Menu content must be added in advance, and only the **top-level menu list** is displayed here.
{% endhint %}

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

**Step 4: Add Images**

Include images and configure their aspect ratio. Preview the final effect.

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

**Repeat the steps above to add custom menus and achieve the desired effect in the example.**


---

# 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://ascent.webvista.studio/header/custom-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.