Ctrlk
YouTube ChannelBook A Demo🪄 Build with AIJoin The Community
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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

Key Difference with the Tabs Component

Understanding the fundamental 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

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 (Xxs, Xs, 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 (Xxs, Xs, 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 (Xxs, Xs, 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.

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.

Interactions

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

Styling

Configure the Tabbed Container's appearance from the Style tab of the Edit Tabbed Container panel.

Controls the outer spacing around the component.

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

Controls the inner spacing between the component's content and its border.

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

Controls the component's dimensions.

  • Width / Height: Set fixed dimensions.

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.

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.

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

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.

Last updated

Was this helpful?