# Bottom Tab bar

### **What is tab bar?**

Tab bar is located in the bottom of the mobile screen which is mostly used to show the most important action pages(webpages) to users. Those are the basic navigation pages in you app.

### How to design Tab bar?

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

### **Select Style**

select the style of  bottom bar menu.

<div><figure><img src="/files/m1Tb52LZ1MaJmY3wSsDF" alt=""><figcaption></figcaption></figure> <figure><img src="/files/uDhq3ZWM7qheQohtKMFz" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/ectpYCfYPVgC8nnqdjsu" alt=""><figcaption></figcaption></figure> <figure><img src="/files/tpBHvlU6Ewhl9g2wPmAD" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/78QJuHFp1wmm0oQtMnp8" alt=""><figcaption></figcaption></figure>

### **Selected color**

This color will be applied to the title of the tab which is currently selected/active. For example, here in the image it's "Home" screen.

<figure><img src="/files/JMzl1DZfSzQ5VOZur4wE" alt="" width="188"><figcaption></figcaption></figure>

### **Unselected color**

This color will be applied to the title of the tab which is currently unselected/de-active. For example, here in the image it's "Shop, Cart & Account" screen.

<figure><img src="/files/Q3HmVt3zFwNbnGfdfjtJ" alt="" width="188"><figcaption></figcaption></figure>

### Selected Font Style&#x20;

Allows you to apply a custom font to the selected tab text.

* Available **only for Premium plans**
* Helps differentiate the active tab visually

### Unselected Font Style (Premium)

Select a font style for unselected tab labels.

* Useful for maintaining typography consistency across tabs

<figure><img src="/files/DENlXqgvUosxJDu2Gnuf" alt="" width="188"><figcaption></figcaption></figure>

### **Background color**

This will change tab bar background color. Here in the image it's white, you can change it to any other color to match your brand color.

<figure><img src="/files/XDysuWwFBJP3VrdbuC5S" alt="" width="188"><figcaption></figcaption></figure>

### Tab Icon Height & Width

This is the size of icons of bottom tabs. Default is 25 \* 25 px.


---

# 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/bottom-tab-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.