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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/setup-theme/navigation-bar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.