> 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="/files/5Teo0SegtGzOO8pqVewx" 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="/files/m2FOFxzsd4QhCJr7qVsQ" 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="/files/P5DudzEsSC4VCnHeQDeB" alt="" width="188"><figcaption></figcaption></figure>

## Button

<figure><img src="/files/kL2CbsRLXUgk8DMRDqE7" alt=""><figcaption></figcaption></figure>

### **Button spacing:**

Changes space between two button in the navigation bar.&#x20;

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

![](/files/oIcsA9RVhRxsB2muYBts) ![](/files/TsSl8wW2GGgo8t8HfyeP)

### Button Leading space:

This will add space on the left side of button. This only applies to the first button on the left side.&#x20;

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

![](/files/WkT8koJsjzewHgwOgfuq) ![](/files/xwpmfLuAGnU4wSqbXcaR)

### 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.

![](/files/tlL1bfe61BmKhNEDUiPK) ![](/files/WEkEOSOwBfhcR24Ice4t)

### **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.

![](/files/Lez2DwV2OPhKLfmV8GHE) ![](/files/8Znk628hUtQ4ZYmHDO8q)