# How do you create tabs in Adalo?

Choose between Adalo screen navigation and state-like tab content, then keep active styling, focus, context, and responsive behavior clear to users.

- Canonical URL: https://adalocado.com/answers/tabs
- Verification: Verified from current public evidence
- Topic: Responsive Design
- Skill level: Beginner
- Last reviewed: 2026-08-12
- Index status: index-now

## Short answer

Use linked screens for primary navigation and conditional content states for tabs that belong to one record. Keep the active tab visible and preserve context across changes.

Use separate screens for primary destinations and the current Tabs Container when panels belong to the same screen context. Derive the active style and visible content from one source of truth, then test back behavior, reload behavior, and responsive layout. The current component is publicly documented, but this article does not claim a hands-on reproduction.

## Intended outcome

Clear tab navigation whose active state matches the visible content.

## Requirements

- Two or more related content views
- A stable navigation model

## Step by step

1. **Choose navigation or state**

   Use screens for major destinations and in-screen states for tightly related content.

2. **Create the tab row**

   Label tabs with short nouns that match their content.

3. **Make active state unmistakable**

   Use color, weight, and an indicator rather than color alone.

4. **Test back behavior**

   Confirm browser, device, and in-app navigation stay understandable.

## Why it works

- Tabs are a spatial promise: selecting a label changes the associated panel without surprising context loss.

## Data model

| Collection | Properties | Relationships |
| --- | --- | --- |
| Optional UI state record | Active Tab | Belongs to a session or user only when persistence is necessary |

## Common failures

### Active styling and content disagree

Derive both from the same saved state or screen destination.

## Testing checklist

- [ ] The active tab label and visible panel always represent the same state.
- [ ] Back navigation and screen reload produce a predictable destination and active state.
- [ ] The active state remains understandable without relying on color alone.
- [ ] Keyboard/touch targets are usable
- [ ] Active state is not color-only
- [ ] Back behavior is predictable

## Limitations

- Marketplace components can change independently, and the forum history includes responsive and icon-only issues that were later reported fixed.

## Community evidence

### [New Component: Tabs Container](https://forum.adalo.com/t/new-component-tabs-container-now-on-the-marketplace/66076)

The announcement documents two to six tabs, visual styles, badges, transitions, and an On Tab Changed output; later replies confirm fixes were shipped. Boundary: The thread also records responsive scaling and icon-only issues before subsequent fixes, so every target layout still needs preview testing.

## Sources

- [Adalo Tabs Container](https://help.adalo.com/component-basics/marketplace-components/tabs-container)
- [Adalo screen linking](https://help.adalo.com/action-basics/how-to-link-screens-through-actions)
- [Adalo forum: Tabs Container announcement](https://forum.adalo.com/t/new-component-tabs-container-now-on-the-marketplace/66076)

Markdown version: https://adalocado.com/answers/tabs.md