# Tab

**Tab** is a container component in Page Designer that allows you to create **tab‑based navigation** within a page.\
Tabs help organize content into separate sections, making pages cleaner, more readable, and easier to navigate—especially when displaying related information in a limited space.

***

### Purpose of Tab Component

The Tab component is commonly used to:

* Group related content into logical sections
* Reduce page length by hiding content behind tabs
* Improve user experience through structured navigation
* Display multiple views without navigating to another page

Tabs are most often used on **Web Pages**, but the concept applies to any layout that requires sectional navigation.

***

### Adding a Tab to a Page

To add a Tab container to your page:

1. Open **Page Designer**.
2. Go to the **Add Components** panel.
3. Locate the **Tab** component under the **Layout** section.
4. **Drag the Tab component** from the component menu.
5. **Drop it onto the desired location** on the design canvas.

Once dropped, a Tab container is created with default tab items.

***

### Working with Tabs

After adding a Tab component, you can:

* Add or remove individual tabs
* Rename tab titles
* Drag and drop components inside each tab
* Reorder tabs as needed
* Style tabs using common styling options (background, border, padding, etc.)

Each tab acts as a **container**, meaning it can hold:

* Text
* Images
* Forms
* Charts
* Other layout components

***

### Best Practices

* Use short, clear labels for tab titles
* Avoid placing too much content in a single tab
* Keep the number of tabs manageable for better usability
* Group closely related content together
* Test tab layout responsiveness on different screen sizes

***

### Summary

The **Tab** component is a powerful layout container in Page Designer that enables clean and organized tab‑based navigation.

Key points:

* Tab is a layout container used for navigation within a page
* It helps structure and group related content
* Components can be freely added inside each tab
* Tabs improve page clarity and user experience

Using Tabs correctly allows you to design **well‑organized, user‑friendly pages** without unnecessary page transitions.


---

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