# Tabbed Container

{% hint style="warning" %}

## **Key Difference with the Tabs Component**

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

* [**Avonni Tabs**](https://docs.avonnicomponents.com/dynamic-components/components/tabs)**:** 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**](https://docs.avonnicomponents.com/dynamic-components/components/tabbed-container)**:** 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="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FTTGoDcUpPM3g9qC44anE%2F2025-03-07_18-40-47%20(1).gif?alt=media&#x26;token=6faf882c-f564-4dcf-a324-50be3341d3ee" 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.