# Tabbed Container

{% 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 %}

## Setting Up Your Tabbed Container

These are the *minimum* steps required to get a functional Tabbed Container working:

### **Add the Tabbed Container**

Drag a Tabbed Container component onto the canvas.

### **Add Tabs (Items)**

* In the Properties Panel, find the `Items` property. Click the button/link to open the Items editor.
* Click "Add Items" to add a new tab. Add at least two tabs to see the tabbing functionality.
* For *each* tab:
  * **Label:** Enter the text you want displayed on the tab itself (e.g., "Details," "Contacts").
  * **Value:** Enter a *unique* value for the tab (e.g., "details," "contacts"). *Avoid spaces or special characters.* This value is used for programmatic access (e.g., setting the active tab).
  * **Icon Name:** The name of an Avonni icon (or a Salesforce SLDS icon) to display on the tab. This adds a visual cue to the tab. Example: `utility:info`, `standard:account`. 
  * **Icon Position**: Where to display the icon. Possible value are `Top`, `left` or `right`.
  * **Tooltip:** A short text description that appears when the user hovers their mouse cursor over the tab. Use tooltips to provide additional context or instructions.
  * **Subtitle:** Text will be displayed *below* the main tab label. This can be used to provide a secondary line of information or a brief description of the tab's content

### **Add Content to Tabs**

* Select the Tabbed Container component on the canvas.
* Click on a tab in the preview to select that tab's content area.
* Drag and drop other Avonni components from the Component Library *into the selected tab's content area*. This is what makes the Tabbed Container so powerful.

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

That's it! At this point, you should have a working Tabbed Container with multiple tabs, and you can switch between the tabs to see the different content areas. You *must* add content to each tab to see it correctly.

## Additional Configuration Options

These settings provide further customization and control over the Tabbed Container's appearance and behavior:

* **Active Item Value:** The `Value` of the currently selected tab. You can *bind* this to a Variable resource to control which tab is active programmatically *and* to react to tab changes.
* **Scrollable:** Enable this if you have many tabs that might not fit within the available width (horizontal orientation) or height (vertical orientation).
* **Show Scroll Buttons:** If `Scrollable` is enabled, this controls whether explicit scroll buttons (arrows) are displayed.
* **Scoped:** If enabled, visually groups the tabs.
* **Orientation:**
  * `Horizontal` (default): Tabs are displayed across the top.
  * `Vertical`: Tabs are displayed along the side (usually the left).

### Tab Selection (Active Item Value)

The `Active Item Value` property controls which tab is selected. Set it to the `Value` of the desired tab. You can set a default value directly.


---

# 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.avonnicomponents.com/dynamic-components/components/tabbed-container.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.