Tabset

A lightning:tabset displays a tabbed container with multiple content areas, only one of which is visible at a time. Tabs are displayed horizontally inline with content shown below it. A tabset can hold multiple lightning:tab components as part of its body. The first tab is activated by default, but you can change the default tab by setting the selectedTabId attribute on the target tab.

Use the variant attribute to change the appearance of a tabset. The variant attribute can be set to default, scoped, or vertical. See Design Guidelines for more information.

This component implements styling from tabs in the Lightning Design System.

Here is an example.

To add content programmatically to the tab body, use the onactive event handler. Here's an example with two tabs, which loads content when the tabs are selected.

In your client-side controller, pass in the component and event to the helper.

Your client-side helper identifies the tab that's selected and adds your content using $A.createComponent().

To create tabs dynamically, use $A.createComponent(). This example creates a new tab when a button is clicked, and uses the moretabs facet to hold your new tab.

The client-side controller adds the onactive event handler and creates the tab content when the new tab is clicked.

Alternatively, you can conditionally display a tab using aura:if. This example creates the tab on initialization but hides it until the desired condition is met. You can display the hidden tab using cmp.set('v.displayTab', !cmp.get('v.displayTab'));.

To select a tab programmatically, add a change handler for the id attribute on lightning:tab. In this example, tabId is monitored by the change handler, which then fires the handleChange controller action to update the selectedTabId attribute.

After updating the tab ID to the new value, display the corresponding tab by updating the value on selectedTabId.

Use lightning:tabset to enable users to easily switch between tabs to perform tasks without leaving the page. Assign a default tab based on the most important use case for the page.

We don't recommend using tabs to define a linear, ordered process since each tab functions independently of the others.

Tab labels must be consistent. For example, use a verb to let users identify a tab's purpose quickly.

Use tabset variants to group your content.

• The default variant creates global tabs. When you select a tab, its content replaces the content of the previously selected tab. The default variant tab encapsulates the content underneath it without enclosing it visually.
• The scoped variant creates a tab set that has a closed container with a defined border. Scoped tabs are useful for stacking several tabbed sections, where you want to change only a portion of the content displayed. When you click those tabs, the content at the bottom remains the same while the content at the top changes for the activity.
• The vertical variant is similar in appearance to the scoped variant, but the tabs are arranged vertically to the side instead of on the top.

You can nest scoped tabs within a global tab set, but don't nest global tabs. If additional hierarchy is necessary, consider using a lightning:tree component.

When you load more tabs than can fit the width of the view port, the tabset provides navigation buttons for the overflow tabs.

You can nest lightning:tab within aura:if or aura:iteration. Otherwise, you must nest lightning:tab directly within lightning:tabset tags.

This component creates its body during runtime. You won’t be able to reference the component during initialization. You can set your content using value binding with component attributes instead.

For example, you can't create a lightning:select component in a tabset by loading the list of options dynamically during initialization using the init handler. However, you can create the list of options by binding the component attribute to the values. By default, the option's value attribute is given the same value as the option passed to it unless you explicitly assign a value to it.