# Navigation

The navigation bar helps users find their way around your app. While in the builder mode, you can access all the pages. The great news is that Jet allows you to craft as many as three menus and combine them. And guess what, you can also personalize your navigation! Here's how you can do it:

1. Configure menu layout
2. Manage menu Items
3. Set up the menu background color
4. Enable/Disable the menu, set conditional visibility via the Fx button

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fl5QtIi7jYIuFxFyz3yJH%2Fimage.png?alt=media&#x26;token=90225982-8876-4fa3-bc13-e2e480a8a801" alt=""><figcaption></figcaption></figure>

## Configure Menu Layout

There are two types of menu layouts **Vertical** and **Horizontal.** Each class has different visibility:

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FwYKKQyZAhymHnJF4OGLi%2Fimage.png?alt=media&#x26;token=13b1513e-14f1-496b-aea9-f7585a8d7130" alt="" width="302"><figcaption></figcaption></figure>

**Vertical  (Left positioning)**

* Thin width
* Wide width

**Horizontal (Top positioning)**

* Primary menu
* Secondary menu
* Inner menu – if you would like to use a combination of a vertical and horizontal menu

## Configure Menu Colors

You can apply different colors to the menu background. Select menu -> click **Color**

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FzrkbO2245jcj3YvM7MVf%2Fimage.png?alt=media&#x26;token=b269b3c5-8411-410a-9dd8-9db14e988b75" alt="" width="312"><figcaption></figcaption></figure>

## Manage menu Items

There are three menu item positionings that you can put items depending on layout:

1. left/top&#x20;
2. center&#x20;
3. right/bottom

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F4kG8aEggVoYwjVXXGIg0%2Fexp.jpg?alt=media&#x26;token=c9bd7711-a8cc-4830-93d8-6ce1627a930b" alt="" width="375"><figcaption></figcaption></figure>

### Menu item types

Customize the menu items by:

* Adding new links to your internal/external pages
* Grouping menu items by using Group&#x20;
* Adding Components
* Rearrange menu items

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FeVKoGeBglIm59Sku6z7P%2Fimage.png?alt=media\&token=3eec6122-7f5c-4a6b-8052-30b7f6fe2cb1)

#### **Grouping menu items**

Grouping allows you to group different menu items in sections or dropdowns.

* Section

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F6Cppww0iMgdtr047xbN8%2Fimage.png?alt=media\&token=25af92b2-c132-4123-a564-7d7ea17d8ef2)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FuUAeW5g0X9vVWVxjKZoi%2Fimage.png?alt=media\&token=2dc31666-6bcb-422a-b843-806c24cf3fa3)

* Dropdown

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fdq0hdLwkxbxJkqKS8rpy%2Fimage.png?alt=media\&token=05c37778-df7b-465e-85a4-7389051470fc)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FrHgaIGLo3QF6I7FSr4kp%2Fimage.png?alt=media\&token=fe1287aa-9b73-4396-bbe8-67dc236edc8c)

* Separator

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F0xNzG7sYXgG2X8VR7e8h%2Fimage.png?alt=media\&token=22421317-1d15-443e-8ffb-1fb5a0cd29ab)

#### ![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FnQ5rv3TXinT1BCcPaFmR%2Fimage.png?alt=media\&token=382dca49-4039-4c46-ad70-9015d1192ea8)

#### **Menu item Links/References**

* Page
* Custom Link
* Section
* App Logo
* Current User
* Icon / Image
* Button
* Dropdown
* Separator
* Open Home
* Open User Profile
* Open Users & Teams
* Open Activity Log Slideout
* Open Activity Log Page
* Open Collaboration Slideout
* Open Collaboration Tasks
* Open Collaboration Messages
* Toggle Light/Dark mode
* Logout
* App members
* [Custom Component](https://docs.jetadmin.io/videos/component-designer)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F4gE1zr0UsjtbK17sh6LV%2Fimage.png?alt=media\&token=0f440dc9-5834-4253-b6fc-7b82448509f3)

#### **Menu Item Components**

* App logo

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F7A4OtCcVFsFQb0AZ8AjH%2Fimage.png?alt=media\&token=36f15721-4393-416c-9d3d-9743a129e2e8)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FV8nLb56UPpaYLV7r93wr%2Fimage.png?alt=media\&token=86dc9108-691d-48db-9358-1f75fc3f3378)

* Current user

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F0Vl2LPQrd6RfwYqaZyFq%2Fimage.png?alt=media\&token=f5c74a13-f24f-405e-b9e2-ac364b4e60e8)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FDksGdokbCmvKMd1jtXKg%2Fimage.png?alt=media\&token=70a5c363-9894-4539-8f6a-ba739994f164)

* Icon/Image

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FRJ6ZeuzZV3rMaWKfXl7a%2Fimage.png?alt=media\&token=2c35f4a9-b678-4049-b076-140b91c4ed86)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FfFaPznOwSOiKnTAN4zyR%2Fimage.png?alt=media\&token=9b7548f9-65e3-4939-b20e-97ccc1a4419e)

* Button

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FQtnHDNCPVCL9HEMu81Fi%2Fimage.png?alt=media\&token=c208ce0d-bbb8-4c1a-94e5-6ab5ceef8619)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FaJ6kjIFmKHM6V9z7EPC5%2Fimage.png?alt=media\&token=88eab9a0-ac0d-4c01-9040-2248d562b0b9)

* Logout

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F9zcNUL3EeXCX1zfdq59t%2Fimage.png?alt=media\&token=4e21ac9d-bc71-4e60-98a7-9cc2ac048589)

* App members

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2Fc1dtXyEvwvURaFJ7lufI%2Fimage.png?alt=media\&token=3ab09477-8473-4063-b358-efc126f60e81)

* Toggle light/dark mode

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2F9LVppPbioJNozLGnQNng%2Fimage.png?alt=media\&token=937d8f65-015b-4da1-aaf8-5778f8bdcbe4)

###

### Menu item Conditional Visibility

Jet allows you to set up Conditional Visibility for each menu item, as well as the whole menu bar.

Click on menu item settings -> **Customize item.**

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FWC5320yQ5tb3O7Whs4yS%2Fimage.png?alt=media\&token=de97d75a-06f2-4eef-8133-115bfcdc720d)

<figure><img src="https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LQ08RFAKZvFADEiXKFy%2Fuploads%2FCdnWa2q2GtDLMri2ejoS%2Fimage.png?alt=media&#x26;token=5c3c076a-426c-4fd8-8a93-b2b48f4ad65e" alt=""><figcaption></figcaption></figure>