# 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FJzmAw10p6vu2EQbImy7r%2FScreenshot%202025-12-16%20at%205.07.46%E2%80%AFPM.png?alt=media&#x26;token=371e6a6f-8b49-495e-9193-2387fa492aef" alt=""><figcaption></figcaption></figure>

### **Select Style**

select the style of  bottom bar menu.

<div><figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FQljvSLHasgrhuIohFOmb%2FScreenshot%202025-02-10%20at%207.35.13%E2%80%AFPM.png?alt=media&#x26;token=75130195-795f-4edc-96ba-2c95f897c162" alt=""><figcaption></figcaption></figure> <figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FXGIzsP06WGZYE0wia9ML%2FScreenshot%202025-02-10%20at%207.34.47%E2%80%AFPM.png?alt=media&#x26;token=5586bd82-fa1f-4c91-b516-ee676a4d6c39" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fi7lxhvZy4FOkkY2wWg6A%2FScreenshot%202025-02-10%20at%207.34.09%E2%80%AFPM.png?alt=media&#x26;token=1dcb9b98-ca7f-458b-9915-5cf730b3049f" alt=""><figcaption></figcaption></figure> <figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fvuclj7wDgubB9W8TkXLs%2FScreenshot%202025-02-10%20at%207.34.24%E2%80%AFPM.png?alt=media&#x26;token=0504153d-e4d4-480a-bc84-a8bd0af148c2" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F5EtwLII7TDeSuLvZZnAB%2FScreenshot%202025-02-10%20at%207.33.46%E2%80%AFPM.png?alt=media&#x26;token=34b3d358-20b7-46f0-9d9a-5d205b907836" 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FWjuzBEwmjpGjJDJ3mJvZ%2FIMG_8893.jpg?alt=media&#x26;token=f217d726-36c5-43aa-b7d0-4ae7295aaa27" 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FmEUM47EC1S9VnDOLfsq3%2FIMG_8893%202%20copy.jpg?alt=media&#x26;token=82e43c04-3368-4edd-95dc-7448d634c785" 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fk49fI6sNdYAhoII7mdPY%2FIMG_3F2D2EB22DE5-1.jpeg?alt=media&#x26;token=5984f74e-d8b1-40ad-a030-2f867fe3054f" 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="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F7c0tZxuSpXZFwKNMSUod%2FIMG_8893%202%20copy%202.jpg?alt=media&#x26;token=d571b544-078a-4204-a1c1-3db6f16f7fc7" alt="" width="188"><figcaption></figcaption></figure>

### Tab Icon Height & Width

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