# Mega Menu

### 1. Configure in the Backend

* Step 1: Go to: Appearance >> Menus >> Select "Primary Menu", then you move on Mega Menu

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2F78AeXktNpjnKvNB4fax4%2FMenus-tripgo.png?alt=media&#x26;token=d8c2547c-61d5-4390-98dd-eb177a2762f1" alt=""><figcaption></figcaption></figure>

* Step &#x32;**: In Parent Menu,** choose Menu Column: Support 1,2,3,4,5 columns

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2FebOcsz8i7Us5CCFHbo37%2FMenus-tripgo-2.png?alt=media&#x26;token=a97f4710-dab4-4016-83fa-41851fed3dad" alt=""><figcaption></figcaption></figure>

* Step 3: **In Child Menu**: Enter a short code of each page, then check the box: "Show as a heading"

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2FzGTTm0u6C8XgWDBtx92U%2FMenus-tripgo-3.png?alt=media&#x26;token=8aa84009-6dd7-4187-85a8-1f5c5c480486" alt=""><figcaption></figcaption></figure>

* Step 4: Tick the checkbox: "Primary Menu" and "Save"

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2FAoiXDHVi6Jd42qeu4hQf%2FMenus-tripgo-5.png?alt=media&#x26;token=400b0710-dca2-4457-83f1-92e45a1d746f" alt=""><figcaption></figcaption></figure>

**Please, Note**:

The Structure: \[ tripgo-elementer-template id=" " ]

To find id of a template

* Go to **Templates > Saved Templates**.
* Hover over the template you want.
* Click on the **"Edit"** button under that template.
* Once the edit page loads, look at the URL in your browser .The template ID will appear in the URL like the image bellow:

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2F2lIGLPuHj8AEcXQlnwQ6%2FMenus-tripgo-4.png?alt=media&#x26;token=975dc4f7-986b-4f16-b058-5ed8a59af494" alt=""><figcaption></figcaption></figure>

## 2: Display in the Frontend

<figure><img src="https://4212765544-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZOiVMEtQvzvKpud2EtLj%2Fuploads%2F9DPjXNsL4NnmS9uzPI4j%2F%7B7EFDFC50-ABBA-47BB-80EE-7C4147896031%7D.png?alt=media&#x26;token=ec6463c7-90bf-49b6-94b7-74ddf00e604f" alt=""><figcaption></figcaption></figure>
