> 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/ms/online-store/menus/main-menu.md).

# Main Menu

Tutorial cara membuat tetapan untuk Menus bagi memudahkan navigasi

Untuk membuat tetapan pada menu terdapat 2 langkah iaitu dengan menghubungkan Page / Category :

**Tutorial** bina page: [**Pages**](/tutorials/ms/online-store/custom-pages/build-pages.md)

{% content-ref url="/pages/AZHHE19c2eNhazdoo6jt" %}
[Build Pages](/tutorials/ms/online-store/custom-pages/build-pages.md)
{% endcontent-ref %}

**Tutorial** bina category: [**Categories**](/tutorials/ms/products/categories.md)

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

## **Bahagian 1 : Cipta Main Menu**

1. Log masuk ke dashboard dan pergi kepada **Online Store** -> **Menus**\
   Paparan seperti di bawah akan keluar.

![](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)

2. Klik pada perkataan **Main Menu.** Paparan seperti di bawah akan keluar. Perhatikan terdapat tab untuk **Menu** dan juga tab untuk **Menu Items.**

{% hint style="info" %}
**\*\***<mark style="color:red;">**Perhatian**</mark>**: Pages** atau **Categories** hanya perlu dimasukkan kepada **Menu Items** dan bukan pada **Menu**.
{% 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)

## Bahagian 2 : Cipta Menu Items

Klik pada tab **Menu Items**. Pastikan paparan seperti di bawah ini akan keluar selepas klik pada **Menu Items.**

{% hint style="info" %}
**\*\***<mark style="color:red;">**Perhatian**</mark>**: Pages** atau **Categories** hanya perlu dimasukkan kepada **Menu Items** dan bukan pada **Menu**.
{% 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)

4. Seterusnya klik pada butang **Add menu item.** Pada ruang **Title** masukkan apa-apa nama yang melambangkan page anda.\
   \
   Pada ruang link masukkan handle sahaja. Contoh adalah seperti dibawah:

* **Pages : /pages/nama-page-anda**
* **Categories : /categories/nama-category-anda**

{% hint style="info" %}
**\*\***<mark style="color:red;">**Perhatian**</mark>**:** Pastikan anda <mark style="color:red;">**tidak**</mark>**&#x20;meletakkan jarak** antara **/** dan **Nama page** anda. Perkara sama juga untuk Categories.
{% endhint %}

Sebagai contoh:

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

### 1 : Dapatkan Link bagi Pages

Terdapat **dua cara** untuk dapatkan link mengikut interface builder anda:

1. **Pages**: Pergi ke **Online store** -> **Pages**-> klik butang **Edit** pada **Nama page** dan copy **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**: Pergi ke **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 : Dapatkan Link bagi Categories

**Categories**: Pergi ke **Products** -> **Categories** -> klik **Edit** pada **categories** -> klik tab **SEO** 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)

5. Paste kan **URL** tu pada ruangan **Link.** Contoh adalah seperti gambar di bawah.

{% hint style="info" %}
\*\*<mark style="color:red;">**Perhatian**</mark>: Sila pastikan <mark style="color:red;">**ejaan**</mark> pada **Link menu items** yang anda telah salin dari **SEO Page** dan **SEO Categories** adalah <mark style="color:red;">**sama**</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)

6. Klik butang **Add**\
   \
   Kini anda boleh cuba lihat pada main menu akan terpapar satu menu yang baru diciptakan sebentar tadi iaitu menu **Tentang Kami**

![](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)

## **Bahagian 3 : Dropdown Menu**

### 1 : Dropdown Menu

Anda juga boleh lakukan fungsi Drag and Drop pada menu items anda. Anda hanya perlu ajukan pointer mouse ke ikon anak panah tersebut dan klik untuk **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>

Kemudian, anda akan dapat lihat paparan pada menu di laman web anda telah berubah.

<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 : Pautan Tajuk Dropdown

Sekiranya anda mahu membuat Tajuk bagi Menu <mark style="color:red;">**tanpa link**</mark>**&#x20;yang spesifik**, anda **hanya perlu letakkan /** pada **ruangan Link (1)**. Selepas itu, anda boleh tekan butang **Save (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>

Paparan bagi menu anda akan seperti dibawah :

<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" %}
Tier dropdown hanya boleh dicipta sehingga **3 Tier sahaja**.
{% endhint %}