> 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/tabs.md).

# Tabs

The Avonni Tabs component displays a set of tabs driven by a data source — each record or value becomes a tab. Use it to create data-driven navigation or filtering controls on a page.

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

Understanding the 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 %}

## Overview

To start with the Avonni Tabs component, connect it to your data and configure how the tabs appear and behave. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

## Configuration

To configure the Tabs, select it on the canvas. The **Edit Tabs** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Data Source

Before your tabs can display any content, you must tell the component where to get the data.

| Source       | Description                                                                  |
| ------------ | ---------------------------------------------------------------------------- |
| **Manual**   | Enter tab names directly in the configuration — ideal for fixed, known tabs. |
| **Query**    | Pull tab names from Salesforce records using a SOQL query.                   |
| **Picklist** | Retrieve tab options from a Salesforce picklist field.                       |

### Data Mapping

When using a dynamic data source, configure the **Data Mappings** section to tell the component how to build each tab from your data. Map your Salesforce fields to the tab item properties (such as label and value) so each tab accurately reflects the correct record.

### Content

#### Active Tab Value

Enter the value of the tab that should be open when the component first loads. This must match the **value** of one of the tab items exactly — including capitalization.

{% hint style="warning" %}
**Important Note**

<mark style="color:red;">It's crucial to enter the tab value exactly as it appears in your tab configuration. Even small differences in spelling or capitalization can prevent the tab from being selected correctly.</mark>
{% endhint %}

#### Scrollable

If enabled, the tab list becomes horizontally scrollable when there are more tabs than can fit on screen, instead of collapsing extras into an overflow menu.

#### Show Scroll Buttons

When **Scrollable** is enabled, turn on **Show Scroll Buttons** to display navigation buttons on either side of the tab bar so users can scroll through hidden tabs by clicking. Requires: **Scrollable** = enabled.

#### Show Scroll Buttons Mobile

If enabled, the scroll buttons also appear on mobile devices. When disabled, buttons are hidden on mobile to allow native touch scrolling. Requires: **Show Scroll Buttons** = enabled.

#### Scoped

When enabled, tabs are displayed inside a bordered container, giving them a closed, scoped visual appearance.

#### Orientation

Choose how the tabs are arranged:

* **Horizontal** (default) — tabs run across the top of the section, ideal for a limited number of tabs.
* **Vertical** — tabs stack on the side, useful when you have many tabs or want to maximize horizontal content space.

### 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 Tabs. Configure them from the **Interactions** tab of the Edit Tabs panel.

### Tab Click

Fires when a user clicks a tab to make it active. Use this to filter query results driven by other components on the page, navigate to a different section, or trigger any flow logic tied to the selected tab.

## Styling

The **Style** tab gives you fine-grained control over the Tabs component's appearance. Configure it from the **Style** tab of the Edit Tabs panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the tabs, creating space between them and other elements.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the tabs content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's overall dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
  {% endtab %}

{% tab title="Background" %}
Sets the background colors for the container and the tabs (set per state: default, Active, Hover).

* **Container:** Set the background behind the whole tabset.
* **Tabs / Tab Active / Tab Hover:** Set the tab background color for each state.
  {% endtab %}

{% tab title="Border" %}
Customizes the tab borders (set per state: default, Active, Hover).

* **Color / Color Active / Color Hover:** Set the border color for each state.
* **Size / Size Active / Size Hover:** Set the border thickness for each state.
  {% endtab %}

{% tab title="Item" %}
Controls the sizing and spacing of individual tab items.

* **Vertical Alignment:** Align item content vertically.
* **Width / Min Width / Max Width / Height:** Set the item dimensions.
* **Line Height:** Adjust the item line height.
* **Spacing Left / Spacing Right:** Set the inner horizontal spacing.
  {% endtab %}

{% tab title="Item Label" %}
Styles the tab label text (set per state: default, Active, Hover).

* **Color / Color Active / Color Hover:** Set the label text color for each state.
* **Font Size / Font Weight / Font Family:** Control the label typography (each available per state).
* **Text Shadow:** Apply a shadow to the label (available per state).
  {% endtab %}

{% tab title="Item Subtitle" %}
Styles the tab subtitle text (set per state: default, Active, Hover).

* **Color / Color Active / Color Hover:** Set the subtitle text color for each state.
* **Font Size / Font Weight / Font Family:** Control the subtitle typography (each available per state).
* **Text Shadow:** Apply a shadow to the subtitle (available per state).
  {% endtab %}

{% tab title="Overflow Buttons" %}
Styles the controls shown when tabs overflow the available width.

* **Overflow Button Text Color:** Set the overflow menu button color.
* **Scroll Button Start Background / Scroll Button End Background:** Set the scroll button backgrounds, including gradients.
  {% endtab %}
  {% endtabs %}

## Output Variables

The Tabs component exposes these output variables you can reference elsewhere on the page after the user interacts with it.

### Tab Selection

When a user clicks a tab, these variables update with the newly active tab's data.

| Output variable        | Type             | What it returns                                                                              |
| ---------------------- | ---------------- | -------------------------------------------------------------------------------------------- |
| **Active Tab**         | Object           | The active tab's data — its label, subtitle, tooltip, value, and disabled/hidden flags.      |
| **Active Tab sObject** | Record (SObject) | The full Salesforce record associated with the active tab. Requires a **Query** data source. |

> **Example:** When a user clicks a tab representing a product category, use **Active Tab** to filter a list component on the same page so it shows only records matching that category's value.

### Others

| Output variable     | Type   | What it returns                                             |
| ------------------- | ------ | ----------------------------------------------------------- |
| **Number of Items** | Number | The total number of tabs currently loaded in the component. |


---

# 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/tabs.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.