# Adding Tab on Mobile

For **Mobile Applications**, tabs are not configured as an inline component like on Web pages.\
Instead, tabs are implemented as a **separate page type**. You create a page with the **Tabs** page type and then link other pages to each tab within the tab bar.

This approach is optimized for **mobile navigation patterns**, such as bottom tab bars commonly used in mobile applications.

***

### Steps to Add Tabs on a Mobile Application

#### Step 1: Navigate to the Mobile Application

1. Open **AppSpace**
2. Go to your **Mobile Application**

***

#### Step 2: Create a New Page

Click the **Create New Page** icon ![](https://docs.oneweb.tech/oneweb/~gitbook/image?url=https%3A%2F%2F2015371994-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FMpDjHWFRUtZ5nJcSfVXd%252Fuploads%252FuWbo7PzdgBzbLd521IZP%252F0%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=e3b3e1fa\&sv=2).

***

#### Step 3: Select Tabs as Page Type

1. Enter the **Page Name**
2. Select **Tabs** as the **Page Type**
3. Click **Start Design**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FDvSKxsOFZqPaZasxGRGJ%2F1?alt=media" alt=""><figcaption></figcaption></figure>

***

### Default Tabs Page

Once the page is created, the system automatically generates a **sample Tabs page** with a basic tab bar layout.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FphwmSnXEM7gwyu8tJbPd%2Fimage.png?alt=media&#x26;token=27ee184c-5ea9-4efb-9bae-fa590f065880" alt=""><figcaption></figcaption></figure>

This page acts as the **main navigation container** for your mobile tabs.

***

### Customizing Mobile Tabs

Users can customize the tabs according to application requirements, including:

* Tab labels
* Icons
* Linked pages
* Order of tabs

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fz1D10tklqtqRa6bO8rI2%2Fatm.png?alt=media&#x26;token=feab9e29-0801-4860-bfea-e1877fe131f7" alt=""><figcaption></figcaption></figure>

Each tab typically links to another page in the mobile application, creating a clean navigation structure.

***

### Tab Bar Advanced Settings

Additional features can be configured at the **Tab Bar element level**, such as:

* Tab bar position (e.g. top or bottom)
* Enable or disable swipe navigation
* Visual behavior and interaction style

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FLwqPQGuHVd3UClVrUj4W%2Fimage.png?alt=media&#x26;token=3ccfb3fc-3a7b-4c7e-a28a-ae6cb0602a49" alt=""><figcaption></figcaption></figure>

These options allow you to tailor the mobile tab navigation to fit different UX requirements.

***

### Summary

For **Mobile Applications**, tabs are implemented as a **Tabs page type**, not as a layout component.

Key points:

* Tabs are created as a **separate page**
* Other pages are linked to individual tabs
* A default tab bar layout is generated automatically
* Tabs can be customized for navigation and behavior
* Advanced settings support mobile‑friendly interactions such as swiping

Using mobile tabs correctly helps create **intuitive, platform‑native navigation experiences** in ONEWEB mobile applications.


---

# 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://docs.onewebstack.com/designer-reference/page-designer/page-designer-tools/tab/adding-tab-on-mobile.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.