mintlify__docs/components/tabs.mdx

---
title: "Tabs"
description: "Use the tab component to organize content into switchable panels for showing different options, platform versions, or language examples."
keywords: ["tabbed content", "content panels", "switchable content"]
---

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.

<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>

````mdx 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](/components/code-groups) that have matching titles.

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

```mdx 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.

<ResponseField name="defaultTabIndex" type="number" default="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.
</ResponseField>

<ResponseField name="sync" type="boolean" default="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.
</ResponseField>

<ResponseField name="borderBottom" type="boolean">
  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.
</ResponseField>

## Tab properties

Set these properties on each individual `<Tab>` component.

<ResponseField name="title" type="string" required>
  The title of the tab. Short titles are easier to navigate. Tabs with matching titles synchronize their selections.
</ResponseField>

<ResponseField name="id" type="string">
  A custom ID for the tab used for anchor linking. If not provided, defaults to the same value as `title`.
</ResponseField>

<ResponseField name="icon" type="string">
  A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
</ResponseField>

<ResponseField name="iconType" type="string">
  For Font Awesome icons only: One of `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>