Tabs let you show variants of the same content in one block. Most often used for code samples in multiple languages, or instructions for different platforms.
Example#
Insert#
Use the slash menu: /tabs. The block inserts with two empty tabs. Click a tab label to rename it; click the + after the last tab to add another. Each tab can hold anything — code, prose, callouts, even nested blocks.
Tabs sync across the page#
If a reader picks "Python" in one tab block, all other tab blocks on the page that have a "Python" tab switch too. This means a reader using Python only ever sees Python examples.
Sync is by tab label (case-insensitive). For sync to work, use consistent labels — JavaScript everywhere, not JavaScript in one and Node in another.
When to use Tabs vs separate code blocks#
| Situation | Use |
|---|---|
| Same operation, different languages | Tabs |
| Same operation, different shells (bash, PowerShell) | Tabs |
| Different steps in a process | Steps, not Tabs |
| Showing input vs output | Two code blocks, not Tabs |
Limits#
- Maximum 6 tabs per block. More than that and the reader can't scan them.
- Each tab can contain anything — code, prose, callouts, even nested components.
- Tabs don't show URLs in the address bar. If you need linkable variants, make them separate pages.