Tab Layout

Use the Tab Layout component to group other components in a set of customizable tabs for structure. Add as many tabs as you need and whatever components you want. You can rename and reorder the tabs, and choose whether to show or hide individual tabs to guest users in the site.

1. Add the Tab Layout component to a page, or select it on the page that you’re configuring.
2. In the property panel, configure the component.
   • To add another tab, click Add.
   • To rename a tab or set its public availability, select the tab. To make that tab available to guest users in the site, select Publicly available. If no tabs are publicly available, the entire Tab Layout component is hidden from guest users.
   • To reorder a tab, drag the tile into a new position.
   
3. Add components to each tab. You can’t add a Tab Layout component to another Tab Layout component.

Important If you applied custom CSS to the old Tabs component, it doesn’t automatically apply to Tab Layout. The newer component uses a different markup from Tabs, so you must adjust the CSS to target the new CSS selector. For example, if you used custom CSS to target the CSS class uiTabItem on the Tabs component, that custom CSS must now target slds-tabs_default__item on Tab Layout.

To present the new tab labels in other languages for a multilingual site, export your site content, translate the tab names, and import the translation back to your site.