Add tabbed content to UI Builder pages
-
- UpdatedJan 30, 2025
- 9 minutes to read
- Yokohama
- Building applications
Use the Tabs component to add tabbed content to pages in UI Builder.

Tabs can be organized in the configuration panel to reorder how they are displayed on the UI Builder page. Add custom labels and icons to tabs to provide unique visual identifiers for navigating across tabs. These changes can be viewed in real-time as you edit the Tabs component.
- Empty container tab
- Repeater tab
- Related list tab
- Page collection tabs
The tabs component supports any combination of static tabs, repeated tabs, related list tabs, and page collection tabs. Alternatively, you can still use the Viewport tab mode to add a series of viewports.
Add empty container tabs
Use an empty container tab to manually create a static set of tabs on your page.
Before you begin
Role required: admin
Procedure
Result
Your page shows the two tabs that you created. Select each tab to further configure them, add styling, or add an event handler. For more information on styling, see Change the default appearance of components. For more information on adding an event handler, see Manage actions in UI Builder pages.
Add repeater tabs
Use the Tabs component to create a set of repeater tabs by linking tabs to a data array.
Before you begin
Role required: admin
About this task
You can use repeater tabs to create multiple tabs based on the data array you provide. You can pass the icon, label, count, and fields as a key in the object. Use the label key to add names to tabs. Use the field key to pass information to repeater tabs. You can bind a data broker, client state, or a client script to the data array provider to return the array of objects with the correct schema.
Procedure
Add related list tabs
Create a set of tabs on a page by linking to a related list.
Before you begin
Role required: admin
Procedure
Add page collection tabs
Use page collection tabs to recreate the same tabs across multiple pages in UI Builder.
Before you begin
Role required: admin
About this task
A page collection is a group of prebuilt globally available pages. Use page collection tabs to render each page in a page collection as a tab. You can select an existing page collection or can create your own. A controller is required to add a page collection. For more information about page collections, see Page collections.
Procedure