> 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/experience-cloud/experience-components/ax-tabs.md).

# 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](/experience-cloud/getting-started/learning-the-basics.md#understanding-slots) for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
{% endhint %}

## Configuration

### Data Source

The tab buttons come from the **Items** data source. There can be up to 10 tabs, and each tab's content goes in the matching content slot (`content-1` for the first item, `content-2` for the second, and so on).

| Data Source Type | Description                                        | Use Case                                                       |
| ---------------- | -------------------------------------------------- | -------------------------------------------------------------- |
| **Manual**       | Enter each tab directly in the builder.            | A fixed set of tabs, which is the usual case for slot content. |
| **Query**        | Build the tabs from a Salesforce object's records. | Tabs that follow your data, such as one tab per category.      |

Each tab takes a **Label**, a **Tooltip** shown on hover, and a **Subtitle** displayed under the label. **Left Icon Name**, **Right Icon Name** and **Top Icon Name** place a Lightning Design System icon beside or above the label, each with its own **Left Icon Size** / **Right Icon Size** / **Top Icon Size** (`Xxs`, `Xs`, `Small`, `Medium` or `Large`).

With a **Manual** source, **Default** marks the tab selected when the page loads. With a **Query** source, each tab also carries a unique **Value**, and **Disabled** and **Hidden** control whether users can interact with it and whether it appears at all.

### Properties

**Orientation** sets the layout of the tabs — `Horizontal` (the default) or `Vertical` — optimizing it for user navigation and content visibility.

**Scoped** enables scoped styling so styles are confined to the component, preventing unintended conflicts with other page elements.

**Scrollable** makes the tabs scrollable, and **Show Scroll Buttons** and **Show Scroll Buttons Mobile** manage the visibility of the scroll buttons on desktop and on mobile, ensuring easy navigation even with a larger number of tabs.

**CMS Content Background Image** and **Content Background Image URL or Expression** customize the background of the tab content area by choosing an image from the CMS or providing a URL; **Content Overlay Color** applies a color overlay on top for readability.

## Styling

{% tabs %}
{% tab title="Size Settings" %}
Define the width and height of the tabs, ensuring they fit seamlessly within your layout.
{% endtab %}

{% tab title="Background and Border Styles" %}
Customize backgrounds and borders with options like colors and sizes, enhancing the visual distinction of each tab.
{% endtab %}

{% tab title="Tab Styles" %}
Adjust various aspects such as vertical alignment, width, height, and spacing to refine the appearance and layout of the tabs.
{% endtab %}

{% tab title="Label and Subtitle Styles" %}
Tailor the look of the text within the tabs, applying colors and font styles to enhance readability and aesthetic appeal.
{% endtab %}

{% tab title="Overflow Button Styles" %}
Customize the appearance of the overflow button, adjusting text and background colors for visual consistency.
{% endtab %}
{% endtabs %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-components/ax-tabs.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.