> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/tabbed-container.md).

# Tabbed Container

The Avonni Tabbed Container is a layout component that creates a tabbed interface. Each tab acts as a container, so you can place any other Avonni components inside it.

## Overview

{% hint style="warning" %}
**Key Difference with the Tabs Component**

Understanding the fundamental difference between the [Avonni Tabs](/dynamic-components/components/tabs.md) and [Tabbed Container](/dynamic-components/components/tabbed-container.md) components is essential, as they serve distinct purposes.

* [**Avonni Tabs**](/dynamic-components/components/tabs.md)**:** This component is designed to create tabs *dynamically* based on a data source. You connect it to a data source (like a list of records, a picklist, or manually entered values), and the component automatically generates a tab for *each item* in that data source. **You *****cannot drag and drop other Avonni components inside the tabs***. Think of it as a data-driven navigation element.
* [**Tabbed Container**](/dynamic-components/components/tabbed-container.md)**:** This component is a *layout container*. It allows you to create a tabbed structure, and then *manually* add and arrange *any* Avonni components within the content area of *each* tab. You have complete freedom to design the layout and content of each tab independently. It's about *structuring* your UI and organizing other components.

Use the **Avonni Tabs** component to create tabs *based on a list of records or options*. Use the **Tabbed Container** component when creating a tabbed layout with *arbitrary components* within each tab
{% endhint %}

## Configuration

To configure the Tabbed Container, select it on the canvas. The configuration panel opens on the right. The sections below mirror the properties from top to bottom.

### Properties

#### Scrollable

When enabled, the tab bar scrolls horizontally (or vertically, in vertical orientation) to reveal hidden tabs instead of collapsing them into an overflow menu.

#### Show Scroll Buttons

When enabled, explicit navigation arrows appear so users can scroll through tabs. Requires: **Scrollable** to be enabled.

#### Show Scroll Buttons Mobile

When enabled, the scroll arrows are also displayed on mobile devices. Without this, mobile devices rely on native touch scrolling. Requires: **Show Scroll Buttons** to be enabled.

#### Scoped

Applies a bordered container style around the tabs, visually grouping them.

#### Orientation

Controls whether tabs are displayed horizontally across the top (default) or vertically along the side.

| Option         | Description                                     |
| -------------- | ----------------------------------------------- |
| **Horizontal** | Tabs appear across the top of the content area. |
| **Vertical**   | Tabs appear along the side of the content area. |

#### Items

Defines the list of tabs. Click **Add Items** to create tabs and configure each one:

* **Label** — The text displayed on the tab.
* **Value** — A unique identifier for the tab. Avoid spaces or special characters; this value is used when setting the active tab programmatically.
* **Tooltip** — Text shown when the user hovers over the tab.
* **Subtitle** — Secondary text displayed below the tab label.
* **Left Icon Name** — A Lightning Design System icon displayed to the left of the label.
* **Left Icon Size** — Size of the left icon (XX-Small, X-Small, Small, Medium, Large). Requires: **Left Icon Name** to be set.
* **Right Icon Name** — A Lightning Design System icon displayed to the right of the label.
* **Right Icon Size** — Size of the right icon (XX-Small, X-Small, Small, Medium, Large). Requires: **Right Icon Name** to be set.
* **Top Icon Name** — A Lightning Design System icon displayed above the label.
* **Top Icon Size** — Size of the top icon (XX-Small, X-Small, Small, Medium, Large). Requires: **Top Icon Name** to be set.
* **Disabled** — If enabled, the tab is visible but users cannot interact with it.
* **Hidden** — If enabled, the tab is not shown.

<figure><img src="/files/zK6WYiPF5x8ARJwk1cPj" alt=""><figcaption></figcaption></figure>

#### Active Item Value

The value of the tab that should be open by default. Select from your configured Items or bind to a Variable resource to control the active tab programmatically. Requires: **Items** to be configured.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Tabbed Container. Configure them from the **Interactions** tab of the Edit Tabbed Container panel.

### Tab Click

Fires when a user clicks a tab that is not already active. Use this to react to tab changes — for example, loading data for the newly selected tab or updating a variable based on the **activeTab** output.

## Output Variables

The Tabbed Container exposes this output variable you can reference elsewhere on the page after the user interacts with it.

### Tab Selection

When a user clicks a tab, this variable updates with the newly active tab's data.

| Output variable | Type   | What it returns                                                                            |
| --------------- | ------ | ------------------------------------------------------------------------------------------ |
| **Active Tab**  | Object | The currently active tab — its label, value, subtitle, tooltip, and disabled/hidden state. |

> **Example:** When a user clicks the "Billing" tab, use **Active Tab** to read its value and show a related billing summary component elsewhere on the page.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/tabbed-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.