How to create Tabs in UI builder navigation?

[SravyaReddy Lak]

How to create/open as tabs in UI builder page like below OOTB design.

[Community Alums]

Hi @SravyaReddy Lakkireddy ,

Use the Tabs component to add tabs inline on your page. Each tab has its own container. Add components and tabs within a Tabs component on your page. You can move tabs in the Config pane to reorder them on the page.

Before you begin

Role required: admin

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.
2. Open an experience to work in. Or, create a new experience by selecting + Create experience. See Create an experience for UI Builder for more information.
3. Create or open a page.
4. Add a Tab set component to your page.

   Tabs component

   

   For more information on how to add a component to a page, see Add and configure components.

5. Click the Edit settings () icon to add a tab label and icon to your Tabs component.

   Add label and icon to Tabs component

   

6. Add a component to your tab, such as a list, button, or heading. The following example shows a Heading component, labeled Tab 1 heading.

   Heading component in Tab

   

7. You can also add additional tabs within a Tabs component. Click () in the Tabs configuration panel.
8. Add a label for your second tab. The following example shows Tab 2. Click the down arrow to choose an icon for the tab, then click Create when finished.

   Add tab label and icon to Tab 2

   

9. Click the Config panel to configure the tabs.
   1. From the Config panel, drag the tabs to reorder them. The tab reorder will then be reflected on the page.

      Reorder tabs

      

   2. Click the Default down arrow to choose which tab opens by default when the page loads.

      Set default tab

      

   3. Choose where the tab labels appear on the page, and whether to hide tab labels so you only see the icons.

      Set tab labels full width, or hide tab labels

      

Result

Your page shows the two tabs that you created. Click each tab to further configure them, add styling, or add an event handler. For more information on styling, see Add styling to a component. For more information on adding an event handler, see Events in UI Builder.

Mark my answer correct & Helpful, if Applicable.

Thanks,
Sandeep

[SravyaReddy Lak]

Hey Sandeep,

Thanks for the thorough explanation of Tabset. It was very excellent information.

Unfortunately, I've already attempted this and am more curious about how to link a button component(On Click)  in tab 1 to open  tab 2.

Really appreciative for your assistance.

Thanks,

Sravya.

[Community Alums]

Hi @SravyaReddy Lakkireddy ,

I think your original question was to create tabs in UI builder navigation and that has been answered !!

Kindly create another question with your second query and mark my answer correct & Helpful, if Applicable.

Thanks,
Sandeep

[Elias Beylouny]

Hi Sandeep

this is a great example how to create Tabs in UI Builder, thank you

But I am trying to do the same and I am not able to add more than one Tab, the Add (+) Option is grayed out for me and not able to click it, have you heard something like that? 

Or do you have any idea what could be the Problem?

thank you

Elias