# 導覽列 Navigation Menu 的設定



## 設定Navigation Menu 不同的位置與樣式.&#x20;

{% embed url="https://www.youtube.com/watch?v=sCxRMeJvnw8" %}

## 建立導覽列的選單項目

Step 1. 路徑 App > Shared Component > Navigation and Search > Navigation Menu

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2F1WE2my3GBUIedX1brq4x%2Fimage.png?alt=media&#x26;token=afd8bacb-d449-47c1-a5d0-c4c54c057fba" alt=""><figcaption></figcaption></figure>

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FbUqyMsvsXdmwGvmfLXjQ%2Fimage.png?alt=media&#x26;token=de5058a5-f785-4bce-8c19-648b57fe1f67" alt="" width="375"><figcaption></figcaption></figure>

Step 2. 點擊 Navigation Menu

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FM8OlfwdMA8S1obq4XfBJ%2Fimage.png?alt=media&#x26;token=c113b143-af8f-469d-bf4d-74e8c6a5d20a" alt=""><figcaption></figcaption></figure>

Step 3. 按 Pencil Icon 可以編輯; (B)\[Create Entry] 可建立選單項目

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2F73IS6JssiLxwXiFzACGB%2Fimage.png?alt=media&#x26;token=f2e6c040-da73-4930-a678-d537d8b579bb" alt=""><figcaption></figcaption></figure>

Step 4. 進編輯畫面後，首先設定 Entry:&#x20;

* &#x20;Parent List Entry 為父層項目, 可用來建立階層式選單項目
* Image/Class：設定項目左方的 icon
* List Entry Label: 選單項目名稱, 可用中文

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2FP2rakuff1PVginnBMS4y%2Fimage.png?alt=media&#x26;token=23241948-4faa-4018-91d7-f635663c714f" alt=""><figcaption></figcaption></figure>

Step 5. 設定項目的 Target 相關屬性

* Target type：轉跳目的, 可以是應用程式內的某個頁面，也可跳至外部網址
* Page： 轉跳的目的頁面。

<figure><img src="https://741116744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5JWGStknepZGULjX5Vhv%2Fuploads%2F2NP21QM55GcPJ8mcNJlh%2Fimage.png?alt=media&#x26;token=c82d0f34-2071-4acf-a8f1-cd2967bda174" alt=""><figcaption></figcaption></figure>



可參考以下操作影片

{% embed url="https://www.youtube.com/watch?v=oo0JrnHnk8Q" %}

