> For the complete documentation index, see [llms.txt](https://ascent.webvista.studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ascent.webvista.studio/header/custom-mega-menu.md).

# 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.**