# Tabs
A tabbed container. Define a list of tabs, give each one a label, and drop content blocks into each tab's slot. The user clicks between tabs to switch the visible content.
## Available in
* All module types
## When to use
* Product detail pages with separate sections (Description / Specifications / Vendor / Reviews).
* Settings screens with grouped options.
* Any page where related content should share screen space without scrolling.
* Account pages with sub-sections (Profile / Orders / Payment Methods).
For sequential flows where the user moves through one step at a time, use **Stepper** patterns inside a single page instead.
## Settings
| Setting | Description |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| **Tabs Configuration** | An array of tabs. Each tab has its own ID, label, display order, and content slot. Use the array editor to add, remove, and reorder tabs. |
| **Default Active Tab ID** | The tab that's open when the page first renders. Leave empty to default to the first tab. |
| **CSS Classes** | Additional CSS classes to apply to the tab container — for fine-tuning appearance from a CSS block. |
Each tab in the configuration has:
* **Tab ID** — unique identifier (auto-generated if you don't set one).
* **Tab Label** — text shown on the tab.
* **Display Order** — number controlling tab order, 1–20.
* **Tab Content** — the slot where you drop child blocks.
## How it works
Tabs render as a horizontal list at the top, with the active tab's content slot below. Tabs are sorted by their Display Order.
When the user clicks a tab, only that tab's content is shown. The unmounted tabs aren't fully removed — their state is preserved between switches.
{% hint style="info" %}
Use distinct, stable Tab IDs (auto-generated is fine) so you can target a specific tab in **Default Active Tab ID** even after reordering.
{% endhint %}
## Examples
**Product detail page.** Tabs with three entries: *Description*, *Specifications*, *Vendor*. Description tab holds a long Product Field. Specifications holds a Grid of Product Fields. Vendor holds a Product Vendor block.
**Account page.** Tabs with *Profile* / *Orders* / *Addresses*. Each tab holds the relevant entity blocks.
**Reports drill-down.** Tabs with *Daily* / *Weekly* / *Monthly*. Each tab holds a Report Widget configured for the matching date range.
## Related
Modal
For pop-up content rather than tabbed in-page content.
---
# 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.in8sync.com/client-admin-guide/active-workflows/getting-started/layout-components/tabs.md?ask=
```
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.