# How do you build tabs on one Adalo screen?

Use Adalo’s Tabs Container to switch between sections on one screen, expose the selected tab, and control content with actions or visibility rules.

- Canonical URL: https://adalocado.com/answers/build-tabs-on-one-adalo-screen
- Verification: Documented from current sources
- Topic: Responsive Design
- Skill level: Beginner
- Last reviewed: 2026-08-16
- Index status: index-now

## Short answer

Use the Tabs Container marketplace component, configure two to six tabs, and use its Selected Tab Index or On Tab Changed output to show, hide, or filter the content for the active section.

Tabs Container replaces duplicate-screen tab workarounds when the sections belong on one screen. The component supplies the active-tab value; visibility, filtering, or actions determine what each tab displays.

## Intended outcome

Users can switch between distinct content sections without navigating to duplicate screens.

## Requirements

- The Tabs Container marketplace component
- Two to six clearly named content sections
- Visibility rules, filters, or actions for each section

## Step by step

1. **Add the Tabs Container**

   Open Marketplace Components, add Tabs Container to the screen, and choose the required number of tabs.

2. **Configure labels and active state**

   Give every tab a short label, choose the default active tab, and select an underline, pill, filled, or text-only style.

3. **Connect tab state to content**

   Use Selected Tab Index or Selected Tab Label in conditional visibility and list filters, or run actions from On Tab Changed.

4. **Test every target width**

   Verify every tab at phone, tablet, and desktop widths, especially when labels or badges vary in length.

## Why it works

- The component keeps tab selection on the current screen and exposes the active index and label as form values.
- Content still needs an explicit rule that maps each tab value to the section it controls.

## Common failures

### Changing tabs does not change the content

Reference the Tabs Container’s Selected Tab Index or Label in the target component’s visibility or filter rule.

### The tab bar does not fit at some widths

Use short labels, reduce the tab count, test Same Size versus Dynamic Width, and verify the component’s responsive layout settings.

## Testing checklist

- [ ] Open the screen and confirm the default tab and content agree.
- [ ] Switch through every tab and confirm that stale content from the prior tab is not left visible.
- [ ] Every tab has a unique value
- [ ] Only the intended section is visible
- [ ] The default tab matches the initial content
- [ ] Labels remain readable at every target width

## Limitations

- Tabs Container supports two to six tabs. More sections require a different information architecture.
- A responsive-width issue reported in the component announcement was later confirmed fixed, but each app should still test its own layouts.

## Community evidence

### [Segmented controls or top tabs](https://forum.adalo.com/t/64137/5)

Adalo released Tabs Container in response to the request. Boundary: The original request did not describe configuration details.

### [Tabs — Navigation or Buttons](https://forum.adalo.com/t/64084/7)

A second feature request points to the same Tabs Container release. Boundary: This is duplicate evidence, not a separate answer.

## Sources

- [Adalo Forum accepted release update](https://forum.adalo.com/t/64137/5)
- [Adalo Help: Tabs Container](https://help.adalo.com/component-basics/marketplace-components/tabs-container)

Markdown version: https://adalocado.com/answers/build-tabs-on-one-adalo-screen.md