mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
3bb55a7bbf
* docs: note emoji as an icon option in frontmatter and components * translations * fix emoji examples for Windows * copy edits --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
116 lines
4.4 KiB
Plaintext
116 lines
4.4 KiB
Plaintext
---
|
|
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"]
|
|
boost: 3
|
|
---
|
|
|
|
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>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Additional CSS classes to apply to the tabs container.
|
|
</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. Supports inline Markdown formatting, such as `**bold**`, `_italic_`, and `` `code` ``.
|
|
</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), [Lucide](https://lucide.dev/icons), or [Tabler](https://tabler.io/icons) icon, a single emoji, a URL to an icon, or a 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>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Additional CSS classes to apply to the tab's content panel. Classes apply to the panel that holds the tab's content, not to the tab's label in the tab bar.
|
|
</ResponseField>
|