Tabbed Content

Tabbed content allows you to create sections where readers can choose between different methods, interfaces, or approaches. This is perfect for documentation that has multiple options or variations.

Overview

Tabbed content lets you organize related content into tabs, making it easy for readers to switch between different options without scrolling through long pages.

Features

• ✅ Dynamic Content Switching: Content changes when tabs are clicked
• ✅ Auto-Updating TOC: The "ON THIS PAGE" section automatically updates when tabs change
• ✅ Progress Bar: Reading progress bar updates correctly with tabbed content
• ✅ Scroll Spy: Active heading highlighting works with tabbed content
• ✅ Keyboard Accessible: Full keyboard navigation support

Basic Usage

Use the <TabbedContent> and <TabPanel> components:

Component Props

TabbedContent

No props required. This is the container component.

TabPanel

• id (required): Unique identifier for the tab
• label (required): Text displayed on the tab button

Examples

Installation Methods

MDX Syntax:

Rendered Result:

Multiple Interfaces

MDX Syntax:

Rendered Result:

Platform-Specific Guides

MDX Syntax:

Rendered Result:

Complete Example

Here's a complete example with multiple tabs:

Best Practices

1. Use descriptive labels: Make tab labels clear and specific
2. Keep tabs focused: Each tab should cover a single topic or method
3. Use unique IDs: Each TabPanel must have a unique id
4. Include headings: Use H2, H3 headings inside tabs (they appear in TOC)
5. Limit number of tabs: Too many tabs can be overwhelming (3-5 is ideal)
6. First tab is default: The first tab is selected by default

Table of Contents Integration

Headings inside tabs are automatically included in the table of contents:

• Headings in the active tab appear in the TOC
• When you switch tabs, the TOC updates automatically
• Headings in inactive tabs are hidden from the TOC

Notes

• Each <TabPanel> must have a unique id
• The label appears on the tab button
• Content inside tabs can include any markdown/MDX
• Headings inside tabs are automatically included in the TOC
• The first tab is selected by default
• Tabs are keyboard accessible (Tab to navigate, Enter to select)

Next Steps

• Code Blocks - Learn about syntax highlighting
• Images & Videos - Learn about media components
• Callout Components - Learn about styled information boxes