# 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%2FMJHE7qBqOryj4FrVppXC%2F202212211447.gif?alt=media&#x26;token=5150869f-aa46-4c5b-bc63-3d6f75843cf3" 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>

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