---
schema_version: "1"
id: 73e8218d4df76f67102d5b8851a7b87ccde46f487c153828409973cf201dccfb
title: Tab Layout
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/experience/264-0-0/rss_tabs.md
canonical_url: https://help.salesforce.com/s/articleView?id=experience.rss_tabs.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 6e5435528b934f9a355b250e6a0b13e6d7ea762c6e96a42095b0d94f6690f48a
description: 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.
products:
  - Experiences
release: "264"
---
# 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.

The Tab Layout component is a replacement for the Tabs component and offers better performance for your Aura site. The Tabs component still works, but because it’s deprecated, we recommend that you move your content from Tabs to Tab Layout for the most up-to-date experience.

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.
    
    ![The new Tab Layout component shown on the canvas in Experience Builder, with its property panel open](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/communities/images/tab_layout_component.png)
3. Add components to each tab. You can’t add a Tab Layout component to another Tab Layout component.

![Important](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-experience-communities-264-0-0-production-enus/bf7df212-91a1-4fa3-a007-4d6f3e3b470b/images/icon_important.png)

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.

#### See Also

- [Which Components Can I Use with Each Aura Template?](https://help.salesforce.com/s/articleView?id=experience.rss_component_reference_table.htm&release=264.0.0&type=5 "Aura site templates, such as Customer Service and Partner Central, are each composed of pages, which in turn are made up of customizable components. Consult this table to find out which Aura template each component can be used in, and when the component became available.")
- [Multilingual Sites](https://help.salesforce.com/s/articleView?id=experience.community_builder_multilingual_overview.htm&release=264.0.0&type=5 "Experience Builder lets you create different language versions of your site to serve separate international audiences. For example, let’s say that you have customers in France and Germany. You can deliver the same site experience to each in the language that’s appropriate for their region.")