# 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="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FBsbQ85LU5Gk4jAYQqYJ3%2Fimage.png?alt=media&#x26;token=022acbcc-230d-436b-bc72-a40bf8e7e64c" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FNe3ccYdIRjRL48iUkGiB%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10.gif?alt=media&#x26;token=556cbf87-1eb3-4e18-86f3-ce48fc9b16d5" 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="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FXp92g9iNOv5ZYuM237Yl%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(1).gif?alt=media&#x26;token=588b7d4c-486f-41c7-a70b-a08ad3af69cd" 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="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FMQtQs1DXV4iSr1JzkNOy%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(2).gif?alt=media&#x26;token=e9fa41bc-8c38-40dc-b10d-6f8fd3a692da" alt=""><figcaption></figcaption></figure>

**Step 4: Add Images**

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

<figure><img src="https://3086053958-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUtxdyhQYbUmYMEm4SSNh%2Fuploads%2FSXZCs4tvTTdkJYLAcvwd%2F%E5%BD%95%E5%B1%8F2025-01-03%20%E4%B8%8B%E5%8D%888.08.10%20(3).gif?alt=media&#x26;token=1e02cb5e-4d56-4f6f-99bc-5bbf644db68c" alt=""><figcaption></figcaption></figure>

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