# Adding Tab on Web

For **Web Applications**, Tabs are provided as a **layout component** that allows you to create tab‑based navigation within a page.\
The **Tabs** component is available under the **Layout** section of the Components menu.

***

### Steps to Add a Tab on a Web Page

#### Step 1: Select the Layout Section

1. Open **Page Designer**.
2. From the **Components Menu**, select the **LAYOUT** category.

***

#### Step 2: Add a Container (Row)

Drag an **empty Row** to the area where you want to place the Tabs component.

> **Note**\
> The Row is used here only as an **outer container** to group the Tabs.\
> You may use other containers (such as Container or Panel) instead of a Row if required.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FKkqbBm8TFUmIjxq6TQGe%2Fatw2.png?alt=media&#x26;token=4926f13a-29d5-4b58-bdc3-abdd2340b94a" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Add the Tabs Component

Drag the **Tabs** component from the **Layout** section and drop it **inside the Row**.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FMhlRPiKW1ngyufwNC8Mr%2Fatw3.png?alt=media&#x26;token=bdbcf132-a6fc-4fb9-b8a2-98a32b388370" alt=""><figcaption></figcaption></figure>

Once added, the Tabs component will appear with default tab items.

***

### Managing Tabs

After adding the Tabs component, you can customize it according to your requirements.

* Use **Show Tab** to switch between different tab contents.
* Use **Add** to create additional tabs.
* Use **Remove** to delete existing tabs.
* Drag and drop components inside each tab to design tab content.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fc5afD4obA5sKwZPkMusB%2Fatw4.png?alt=media&#x26;token=943a139f-98c0-45a0-a225-75067fa1ebdb" alt=""><figcaption></figcaption></figure>

Each tab acts as an independent **container**, allowing full flexibility in layout and content design.

***

### Deleting Tabs on Web Pages

You can delete a tab using either of the following methods:

#### Method 1: Delete from Tab Options

1. Click the **Tab** you want to remove.
2. An options menu appears above the Tab.
3. Click the **Delete** 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%252FuVCyC9KG2A3irKM2bmA8%252F3%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=6e3f7d9f\&sv=2).

***

#### Method 2: Remove from Tab Menu

Click the **Remove** icon at the top of the tab menu ![](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%252FNrVvBHnGB5R0JjmzCtzQ%252F4%3Falt%3Dmedia\&width=300\&dpr=3\&quality=100\&sign=e0a5e861\&sv=2).

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FcYqTfBrQSG7bmVjiBAp3%2Fatw5.png?alt=media&#x26;token=7c746c45-349c-4c4c-a96f-b65b552ea47e" alt=""><figcaption></figcaption></figure>

***

#### Confirm Deletion

After selecting Delete or Remove, the system will ask for confirmation.

* Click **Yes** to permanently delete the selected tab.
* The tab and its content will be removed from the page.

***

### Summary

Adding Tabs on Web pages allows you to:

* Organize content into sections
* Reduce page length
* Improve user navigation and readability

Key points:

* Use **Tabs** from the Layout section
* Place Tabs inside a container (Row or others)
* Add, remove, and switch tabs easily
* Each tab can contain any page components

Tabs are a powerful layout tool for building **structured and user‑friendly web pages** in Page Designer.


---

# 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/oneweb-platform-th/designer-reference/page-designer/page-designer-tools/tab/adding-tab-on-web.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.