> For the complete documentation index, see [llms.txt](https://help.twinr.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.twinr.dev/setup-theme/navigation-bar.md).

# Navigation bar

### **What is Navigation bar?**

The *top app bar* provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions.

### How to design Navigation bar?

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FNVWmKxRjO5zK2Fu9sEOa%2FScreenshot%202025-12-16%20at%205.06.09%E2%80%AFPM.png?alt=media&amp;token=bf1cdb7d-de46-4a3e-ba35-d4d3a5d310f7" alt=""><figcaption></figcaption></figure>

### Title

The **Title** section controls how the navigation bar title is displayed.

* **Text Style**\
  Choose **Custom** to manually control font size, weight, color, and font family.\
  You can also select predefined styles such as Heading or Body to apply theme-based typography.
* **Font Size**\
  Set the size of the title text in pixels (e.g., 18px).
* **Font Weight**\
  Select how bold the title text appears (e.g., Regular 400 or Bold 700).
* **Font Style (Premium)**\
  Choose a custom font family (e.g., Abel, Aladin) to personalize the navigation bar title.

  > This option is available only for **Premium plans**.
* **Color**\
  Pick a predefined theme color (Primary, Heading, Body, Label, Icon, Background) or select a **Custom** color using a HEX code.
* **Title Image Height / Width**\
  Define the size of the title icon or image displayed alongside the title text.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FJS9eFHQukdGBz63nOST3%2FIMG_8894%202.PNG?alt=media&amp;token=59932c96-9ed8-477e-8a93-61b6a28bef6d" alt="" width="188"><figcaption></figcaption></figure>

### **Background color**:

The **Background Color** setting controls the color of the navigation bar background.

* Select from predefined theme colors such as **Primary**, **Heading**, or **Background**.
* You can also choose **Custom** to apply a HEX color value.
* This helps ensure proper contrast and alignment with your overall app theme.

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FGr6x5wYXFwqjcMgC0tuW%2FIMG_8894.PNG?alt=media&amp;token=c7ba12cb-d27e-4676-a43e-35496dd2f9b3" alt="" width="188"><figcaption></figcaption></figure>

## Button

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FkOEJd2QodvWsi2aFJsP7%2FScreenshot%202023-06-02%20at%207.36.04%20PM.png?alt=media&amp;token=404ed32c-1493-4f73-a6bb-7a9a14cd8619" alt=""><figcaption></figcaption></figure>

### **Button spacing:**

Changes space between two button in the navigation bar.

**Ex.** In the first image, the spacing between two buttons are 15%. In the second image, the spacing between two buttons are 35%.

![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F9GeDpy9XMHcafa8N6SUC%2Fnav_bar_button_spacing_less.png?alt=media\&token=6bb6d68e-69ba-4cf1-924e-5dd344e7d222) ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FW8qJGqVsPwI8myMigqWk%2Fnav_bar_button_spacing_more.png?alt=media\&token=41d9f696-94d3-4121-a102-4693481217d8)

### Button Leading space:

This will add space on the left side of button. This only applies to the first button on the left side.

**Ex.** In the first image, the leading space is default 10px. In second image, it's 30px.

![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FLlQFLh4OYzR8Gqmdbkau%2Fimage.png?alt=media\&token=e7120d76-8480-4575-a1ae-1996947065ac) ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Ff1dPcZR03LiZrvse5ABG%2Fimage.png?alt=media\&token=698a00b1-408e-4d89-a374-bc71ca4828ac)

### Button Trailing space:

This will add space on the right side of button. This only applies to the last button on the right side.

**Ex.** In the first image, the trailing space is default 10px. In second image, it's 30px.

![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FcXjLfMBPylslWBIOJ20y%2Fimage.png?alt=media\&token=30f49c06-f840-481c-ac94-7627bcb28bdb) ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FXvgcrGYJJh4wntC8z7MY%2Fimage.png?alt=media\&token=2df5e540-b102-4625-90d9-43387ae354e2)

### **Button height & width:**

Apply navigation bar button height and width.

**Ex.** In the first image, the size of the button is 80x80. In the second image, size of the button is 50x50.

![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FIztxb5HxtMWOC5UWWTST%2Fnav_bar_button_height_width_big.png?alt=media\&token=37e41e6d-f92f-4162-8d65-60e8d9d32ab3) ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FGHioxVtOHLamVKC6eKr8%2Fnav_bar_button_height_width_normal.png?alt=media\&token=8f860a59-4ca8-40f1-b17f-b1f27d3e8897)