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.
This component leverages slots for advanced customization, making it ideal for LWR sites. Aura sites do not support this level of customization.
Configuration
Properties
Orientation sets the layout of the tabs — horizontal 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 (with its mobile variant) manages the visibility of the scroll buttons, ensuring easy navigation even with a larger number of tabs.
CMS Content Background Image and Content Background Image URL 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.
Data Source defines the source of the tab labels and content, enabling manual configuration of tab properties such as labels, icons, and tooltips.
Styling
Define the width and height of the tabs, ensuring they fit seamlessly within your layout.
Customize backgrounds and borders with options like colors and sizes, enhancing the visual distinction of each tab.
Adjust various aspects such as vertical alignment, width, height, and spacing to refine the appearance and layout of the tabs.
Tailor the look of the text within the tabs, applying colors and font styles to enhance readability and aesthetic appeal.
Last updated
Was this helpful?

