Tabs

Use the tab component to organize content into switchable panels for showing different options, platform versions, or language examples.

Use tabs to organize content into multiple panels that users can switch between. You can add any number of tabs and include other components inside each tab.

☝️ Welcome to the content that you can only see inside the first tab.

You can add any number of components inside of tabs. For example, a code block:

HelloWorld.java

  class HelloWorld {
      public static void main(String[] args) {
          System.out.println("Hello, World!");
      }
  }

Tabs example

<Tabs>
  <Tab title="First tab">
    ☝️ Welcome to the content that you can only see inside the first tab.

    You can add any number of components inside of tabs. For example, a code block:
    ```java HelloWorld.java
      class HelloWorld {
          public static void main(String[] args) {
              System.out.println("Hello, World!");
          }
      }
    ```
  </Tab>
  <Tab title="Second tab" icon="leaf">
    ✌️ Here's content that's only inside the second tab.

    This one has a <Icon icon="leaf" /> icon!
  </Tab>
  <Tab title="Third tab">
    💪 Here's content that's only inside the third tab.
  </Tab>
</Tabs>

Tabs with matching titles stay in sync across the page. For example, if you have multiple tab groups that include a JavaScript tab title, selecting JavaScript in one tab group automatically selects JavaScript in the others. This helps users who choose a language or framework once see that choice reflected everywhere. Tabs also sync with code groups that have matching titles.

To disable tab synchronization, add sync={false} to a <Tabs> component.

Disable tab sync example

<Tabs sync={false}>
  <Tab title="First tab">
    This tab group operates independently.
  </Tab>
  <Tab title="Second tab">
    Selecting tabs here won't affect other tab groups.
  </Tab>
</Tabs>

Tabs properties

Set these properties on the <Tabs> wrapper component.

defaultTabIndexnumberdefault: 0

The index of the tab to display by default (zero-based). For example, set to 1 to show the second tab on page load.

syncbooleandefault: true

When true, tabs synchronize with other tabs and code groups on the page that have matching titles. Set to false to make tabs independent.

borderBottomboolean

Adds a bottom border and padding to the tabs container. Useful to visually separate tabbed content from the rest of the page, especially when tabs contain content of varying lengths.

Tab properties

Set these properties on each individual <Tab> component.

titlestringrequired

The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections.

idstring

A custom ID for the tab used for anchor linking. If not provided, defaults to the same value as title.

iconstring

A Font Awesome icon, Lucide icon, URL to an icon, or relative path to an icon.

iconTypestring

For Font Awesome icons only: One of regular, solid, light, thin, sharp-solid, duotone, brands.

Tabs properties

Tab properties

On this page