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.

Key Difference with the Tabs Component

Understanding the difference between the Avonni Tabs and Tabbed Container components is essential, as they serve distinct purposes.

• Avonni 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: 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.

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.

Aggregation adds a calculated number beside a tab's label — a count or total that tells users what sits behind the tab before they open it. Configure it per item in query mode: pick the Object API Name, the Fields to aggregate, and the Aggregate Function (AVG, COUNT, COUNT_DISTINCT, MAX, MIN, or SUM). Enable Treat Blank Value As Zero to count empty fields as 0. Set a Platform Event Channel Name to have the number recalculated whenever an event is published on that channel, so the badge stays live.

Content

Active Item 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.

Important Note

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.

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.

Aggregation Display Mode

Controls where each tab's Aggregation value is rendered.

• Standard (default) — the value is stacked below the tab label.

• Inline — the value sits on the same row as the label.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions 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.

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.

Padding

Controls the inner spacing between the tabs content and its border.

• Top / Right / Bottom / Left: Adjust the inner spacing on each side.

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.

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.

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.

Item

Controls each tab item's sizing/spacing plus its label and subtitle text (label and subtitle set per state: default, Active, Hover).

• Item: Vertical Alignment, Width / Min Width / Max Width / Height, Line Height, and Spacing Left / Spacing Right.

• Label: Color / Color Active / Color Hover, Font Size / Font Weight / Font Family (per state), and Text Shadow (per state).

• Subtitle: Color / Color Active / Color Hover, Font Size / Font Weight / Font Family (per state), and Text Shadow (per state).

Item Aggregation Value

Styles the aggregation value shown on each tab (set per state: default, Active, Hover).

• Background Color / Color / Font Size / Font Weight / Font Family / Text Shadow: Set the badge background, text color and typography for each state.

• Border: Color / Size / Style for each state, plus Radius.

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.

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.