---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add tabbed content to UI Builder pages

# Add tabbed content to UI Builder pages {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 7 minutes to read

Use the Tabs component to add tabbed content to pages in UI Builder.

Create additional navigation on your UI Builder page by adding a Tabs component to your page. Use the Tabs component to nest components within tabs on your page. Tabs can be configured as either horizontal tabs at the top of the content, or as
vertical tabs on the left or right side of the content.

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.  
You can add one of the following types of tabs to your UI Builder page:

* Empty container tab
* [Repeater](https://www.servicenow.com/docs/0sELm2ikviPfvrr6utQ7VA#gloss-repeater-ui-builder "In UI Builder, a repeater is a component that acts as a basic loop that repeats the data you provide in multiple components. Repeaters use an array or an array of objects. Repeaters bind values to a data array property. For example, [{\"task\": \"A\"},{\"task\": \"B\"}], repeats the content inside it two times.") tab
* Related list tab
* Page collection tabs
{#tabs-components__ul_anm_nst_c5b}

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 {#ariaid-title2}

Use an empty container tab to manually create a static set of tabs on your
page.

### Before you begin

Role required: admin

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page or page variant.  
   For more information about how to create a page in UI Builder, see [Create a page
   in UI Builder](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select the + Add content button on the stage to open the toolbox.  
5. Select a Single column layout.
6. Next, select the + icon in the column to open the toolbox.
7. Add a Tabs component to your page.  

   For more information on how to add a component to a page, see [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
8. Select + Add tab on the stage.  
9. Select Start from an empty container.  
10. Select Next.
11. On the form, fill in the fields.  
    {#add-a-tab-component__table_usy_s1c_wtb__entry__2}

    | Field | Description |
    |-|-|
    | Tab label | Label for the tab to display on your page. |
    | Icon | Icon to appear next to the tab label. Icons are not required. |
    | Hide tab | Whether to hide or display the tab. |
    [Table 1. Tab settings form]

    {#add-a-tab-component__table_usy_s1c_wtb}
12. Select Create.  
    The new tab displays in the Tabs component.
13. Select the new tab.
14. Select + icon.  
15. Select the component that you want to add to the tab.  
    Components display under the tab in which they're nested in the content tree. For more information, see [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").

### 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](https://www.servicenow.com/docs/EdZf3ux6lLpP5nudXTgSnQ#add-styling-to-component "Set the styles for components and wrappers to change the default appearance."). For more information on adding an event handler, see [Manage actions in UI Builder pages](https://www.servicenow.com/docs/g8OZxPXUSQQN2_E5mYba5A "Learn how to work with events so that you can add actions to components, pages, data resources, and declarative actions in UI Builder.").

## Add repeater tabs {#ariaid-title3}

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](https://www.servicenow.com/docs/0sELm2ikviPfvrr6utQ7VA#gloss-repeater-ui-builder "In UI Builder, a repeater is a component that acts as a basic loop that repeats the data you provide in multiple components. Repeaters use an array or an array of objects. Repeaters bind values to a data array property. For example, [{\"task\": \"A\"},{\"task\": \"B\"}], repeats the content inside it two times.") 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

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page or page variant.  
   For more information about how to create a page in UI Builder, see [Create a page in UI Builder](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select the + Add content button on the stage to open the toolbox.  
5. Select a Single column layout.
6. Next, select the + icon in the column to open the toolbox.
7. Add a Tabs component to your page.  

   For more information on how to add a component to a page, see [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
8. Select + Add tab on the stage.  
9. Select Use a repeater.  
10. Select Next.
11. Enter a label for the repeater tab in the Placeholder tab label field.  
    This label is assigned to the first repeater tab and is the only tab displayed in the page preview.
12. Select Edit in the Data array field.  
13. Configure the data array in the JSON editor.  
    {#add-repeater-tab__table_spf_5sb_5kb__entry__3}

    | Key | Data type | Description |
    |-|-|-|
    | icon | String | Name of the icon that appears in UI Builder. |
    | label | String | Required. Display name of the tab in UI Builder. |
    | count | Number | Value to provide on the tab label. Dynamically bind to a data broker or a client script that will be displayed on the label. |
    | fields | Object | Object that can be used to store information and to pass down to the components in the tabs. |
    [ ]

    {#add-repeater-tab__table_spf_5sb_5kb}
14. Select Apply.  
    The data array field displays the data array configuration.

15. Select Create.  
    The new repeater tab appears on the page and in the content tree.

16. Select Save.
17. Add components to the repeater tab.
18. Select ![Preview button that opens your page in runtime, which is a preview of how the page looks on a web page.]() to verify that the repeater tabs display correctly on your page.

## Add related list tabs {#ariaid-title4}

Create a set of tabs on a page by linking to a related list.

### Before you begin

Role required: admin

### About this task

The related list
tab automatically populates tabs based on the record that your page is displaying.
For example, by default the related lists for the user table are Roles, Groups,
Delegates, and Visibility domains. If your page is displaying a user record, then
creating a related list tab adds all four of these related lists as tabs on your
page. You can preview the page to see the related lists that were added. A record
controller is required to create related list tabs. To add a controller to your
page, see [Bind data to UI Builder pages using controllers (advanced feature)](https://www.servicenow.com/docs/vUcCQFUFKEqxLdTSoa~1ng#controllers "Controllers simplify the linking of data and event logic to enable component presets in UI Builder.") for more
information.

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page or page variant.  
   For more information about how to create a page in UI Builder, see [Create a page in UI Builder](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select the + Add content button on the stage to open the toolbox.  
5. Select a Single column layout.
6. Next, select the + icon in the column to open the toolbox.
7. Add a Tabs component to your page.  

   For more information on how to add a component to a page, see [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
8. Select + Add tab on the stage.  
9. Select Display related lists for a record.  
10. Select Next.
11. On the form, fill in the fields.  
    {#add-related-list-tab__table_usy_s1c_wtb__entry__2}

    | Field | Description |
    |-|-|
    | Placeholder tab label | Placeholder label to appear on the preview tab of your page. |
    | Hide tab | Whether you want to hide or display the tab. |
    | Record Controller | Record controller with the related list. |
    [Table 2. Tab settings form]

    {#add-related-list-tab__table_usy_s1c_wtb}
12. Select Create.  
    The new related list tab displays in the Tabs section of the configuration panel. Only one placeholder tab appears in the page preview. The green icon next to the related list tab in the content tree shows how many tabs appear on your page.
13. Select Save.
14. View and test your page by selecting ![Preview button that opens your page in runtime, which is a preview of how the page looks on a web page.]().

## Add page collection tabs {#ariaid-title5}

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](https://www.servicenow.com/docs/KQ398PtuWzgkbPR8a3UWvQ "Page Collections are groups of pages that can be used across multiple experiences.").

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page or page variant.  
   For more information about how to create a page in UI Builder, see [Create a page
   in UI Builder](https://www.servicenow.com/docs/gGPA7eivyM0RFTMUEX~LWw "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. Select the + Add content button on the stage to open the toolbox.  
5. Select a Single column layout.
6. Next, select the + icon in the column to open the toolbox.
7. Add a Tabs component to your page.  

   For more information on how to add a component to a page, see [Add and configure components](https://www.servicenow.com/docs/S25G6VJ3jD8Bu7gj_TwOLA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
8. Select + Add tab on the stage.  
9. Select Add a page collection.  
10. Select Next.
11. Select a page collection from the list or create a collection by selecting + Create collection.  
    To create your own page collection, see [Create a page collection across multiple UI pages](https://www.servicenow.com/docs/qDx6ePKJ9vRiIYRx5FbIlg "Create a page collection to accommodate tabbed content that can be used across experiences.").

12. Select Add.  
    The new page collection tab displays in the Tabs section of the configuration panel. Only one placeholder tab displays in the page preview.

13. Select Save.
14. View and test your page by selecting ![Preview button that opens the page variant.]().

*[\>]: and then