> For the complete documentation index, see [llms.txt](https://docs.shoppego.my/tutorials/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shoppego.my/tutorials/en/online-store/menus/main-menu.md).

# Main Menu

Two steps for setting up menus by linking Page or Categories :

1. Creating **Page/Category**:

Tutorial to **create pages**: [Pages](/tutorials/en/online-store/pages/build-pages.md)

{% content-ref url="/pages/vbhtT4MWUO5DUswHVNbV" %}
[Build pages](/tutorials/en/online-store/pages/build-pages.md)
{% endcontent-ref %}

Tutorial to **create Categories**: [Categories](/tutorials/en/products/categories.md)

{% content-ref url="/pages/uuKH7DD5HX8fxPxYodny" %}
[Categories](/tutorials/en/products/categories.md)
{% endcontent-ref %}

## **Part 1 : Create Main menu**.

Log in to your account and head over to dashboard **Online Store** -> **Menus** and you will see this section.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-b403be258e218a8f4ccf2265c47cbf255964da98%2FcI9GzM1hEBHZyrz7nYJM.jpg?alt=media)

Click on the word **Main Menu**. A display similar to the one below will appear. Be advised there are tabs for the **Menu** and also tabs for **Menu Items**.

{% hint style="info" %}
Note: **Pages** or **Categories** should only be added to the **Menu Items** and <mark style="color:red;">**not the Menu**</mark>.
{% endhint %}

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-5639f51e1ab54a7a51a0b01a08bf9fd04996b03a%2FxfNxA4YQWATvoe9rpWWC.jpg?alt=media)

## Part 2 : Create Menu Items

Click the **Menu Items** tab and make sure this kind of section comes out then click on **Menu items.**

{% hint style="info" %} <mark style="color:red;">\*\*Note\*\*</mark>: \*\*Pages\*\* or \*\*Categories\*\* should only be added to the \*\*Menu Items\*\* and <mark style="color:red;">\*\*not the Menu\*\*</mark>.
{% endhint %}

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-139bfaddb38ce9131a35ef71623d29b7ee1ac144%2FeQt4oVQWeiph3XKoV3QY.jpg?alt=media)

Next, click the "**Add menu item**" button. In the **Title** field, enter any name that represents your **page**.

In the link field, **only enter the handle.**

* **Pages**: **/pages/your-page-name**
* **Categories**: **/categories/your-category-name**

{% hint style="info" %}
\*\*<mark style="color:red;">**Attention**</mark>: Make sure you <mark style="color:red;">**do not**</mark>**&#x20;put a space** between **/** and your **page name**. Same goes with categories.
{% endhint %}

For example:

* **/pages/your-page-name** ✅
* **/pages/**<mark style="color:red;">**<->**</mark>**your-page-name**❌

### 1 : To get the link for Pages

There are **two ways** to get the link according to your builder interface:

1. **Pages**: Go to **Online store** -> **Pages** -> click on the **Edit** button on the **Page** name and copy the **URL**.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-00a8b8b2acfaa640300e124729be1c37f744991f%2F-MBcdI5yhwTji5x4SY_8.png?alt=media)

2. **Pages**: Go to **Online store** -> **Pages**-> **Edit** -> **More** -> **Settings** -> **SEO** -> copy **URL**.

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-c9370ec2448fa1bef36182a01bf83a5cf6b99c4b%2FIdL86YIf2ulusWuKs1O2.jpg?alt=media" alt=""><figcaption></figcaption></figure>

### 2 : To get Link for Categories

**Categories**: go to **Products** -> **Categories** -> click **Edit** on **categories** -> click **SEO** tab copy **URL**

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-00c07462c265f97f990b4a4e8809265606c00559%2F-MBcdPKYpnsNmZYQF_v3.png?alt=media)

Paste the **URL** in Link **textfield**. The example are below.

{% hint style="info" %} <mark style="color:red;">\*\*Note\*\*</mark>: Please ensure that the \*\*spelling in the Link menu items\*\* that you have \*\*copied from SEO\*\* \*\*Pages\*\* and \*\*SEO Categories\*\* is the <mark style="color:red;">\*\*same\*\*</mark>.
{% endhint %}

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-5e65225ab91e96a14e4027d32134e5aeebd6a5b5%2F-MBcdY5gRDWVIGNhiXpz.png?alt=media)

Click Add button and you will see new menu list on your web.

![](https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-d81d10dc860d7df743cd44233802a80d681db136%2F-MBcdg1sWdKLKU4cSTPt.png?alt=media)

## Part 3 : Function of Drag and Drop

### 1 : Dropdown Menu

You can also perform the **Drag and Drop function** on your **menu items**. Simply hover the mouse pointer to the arrow icon and click to **DRAG and DROP.**

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-f04c241f4bc61a02b5024dd4bd86453653c25a49%2FLMFRdPKeaUnyZKju64sV.jpg?alt=media" alt=""><figcaption></figcaption></figure>

And then, you will be able to see the display on the **menu on your website has changed.**

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-7c2d3010ef0a7402b51f930955def9c0485cf642%2FtOdtjd4cDk7C3yxmKvDr.jpg?alt=media" alt=""><figcaption></figcaption></figure>

### 2 : Dropdown Header Link

If you want to create a **header for a menu** <mark style="color:red;">**without**</mark>**&#x20;a specific link**, you just need to **put a /** in the **Link field (1)**. After that, you can press the **Save button (2)**.

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-ff1322c748d63bf1574e0c4473c4b1c549bb7ef6%2F19BCf1j704205tzpbFoK.jpg?alt=media" alt=""><figcaption></figcaption></figure>

Your menu display will look like the following:

<figure><img src="https://3359028955-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Lh09fNwqqta5Vj6Wr8p%2Fuploads%2Fgit-blob-4e11682a9671b52310849607e51eb6b9039c93c4%2Fg6uyEaovja82iP36X1Ky.jpg?alt=media" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
The tier dropdown can only be created up to **3 tiers** only.
{% endhint %}