# AX - Tabs

## Overview

**AX - Tabs** is an Experience Cloud component that organizes content into labeled tabs on Experience Sites pages, letting portal users switch between different sections without leaving the page.

Use it to organize related content that doesn't all need to be visible at once—like product details across multiple tabs, multi-section forms, categorized resources, or grouped information. Choose horizontal or vertical tab layouts and configure styling in Experience Builder.

Perfect for product information pages, multi-step forms, resource categories, account sections, or anywhere your portal needs to organize content into switchable views. 

{% hint style="danger" %}
This component [leverages slots](https://docs.avonnicomponents.com/experience-cloud/getting-started/learning-the-basics#understanding-slots) for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
{% endhint %}

## Tutorials

Coming Soon

## Settings

{% tabs %}
{% tab title="🎛️ Properties" %}

| Name                                                             | Description                                                                                                                           | Usage                                                                                                                                                 |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Orientation**                                                  | Set the orientation of the tabs, choosing between a horizontal or vertical layout.                                                    | Select the orientation that best suits your design needs, optimizing the layout for user navigation and content visibility.                           |
| **Scoped**                                                       | Enable scoped styling for more focused and specific style application to the tabs.                                                    | Use this feature to apply styles that are confined to the component, preventing unintended styling conflicts with other page elements.                |
| **Scrollable & Scroll Buttons**                                  | Make the tabs scrollable and manage the visibility of scroll buttons, ensuring easy navigation even with a larger number of tabs.     | Configure scrolling features based on the quantity and layout of tabs, ensuring that users can easily access and navigate through all available tabs. |
| **CMS Content Background Image Or Content Background Image URL** | Customize the background of the tab content area by choosing an image from the CMS or providing a URL.                                | Enhance the visual appeal of your tabs by applying a background image that complements the overall design and content presentation.                   |
| **Data Source**                                                  | Define the source of the tab labels and content, enabling manual configuration of tab properties such as labels, icons, and tooltips. | Utilize this feature to customize the tab data, ensuring each tab is accurately labeled and enriched with icons or tooltips as needed.                |
| {% endtab %}                                                     |                                                                                                                                       |                                                                                                                                                       |

{% tab title="🎨 Styling" %}

| Name                             | Description                                                                                                                    |
| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| **Size Settings**                | Define the width and height of the tabs, ensuring they fit seamlessly within your layout.                                      |
| **Background and Border Styles** | Customize backgrounds and borders with options like colors and sizes, enhancing the visual distinction of each tab.            |
| **Tab Styles**                   | Adjust various aspects such as vertical alignment, width, height, and spacing to refine the appearance and layout of the tabs. |
| **Label and Subtitle Styles**    | Tailor the look of the text within the tabs, applying colors and font styles to enhance readability and aesthetic appeal.      |
| **Overflow Button Styles**       | Customize the appearance of the overflow button, adjusting text and background colors for visual consistency.                  |
| {% endtab %}                     |                                                                                                                                |
| {% endtabs %}                    |                                                                                                                                |