Tabs (:::tabs, :::tab-item)

↑ Docs content model

Tabs render content in a tabbed interface, with selection synced across tab groups on the page.

When to use

Use tabs to present parallel variants of the same content — the same task in different languages (Python, SQL, Scala), or alternative approaches — where a reader picks one. Don't use tabs to hide content a reader needs regardless of their choice.

Technical details

To use tabs, add :::tab-item children nested inside :::tabs.

Each :::tab-item directive must specify its tab label in square brackets (for example, :::tab-item[JavaScript]). The tab label is displayed (with auto-capitalization), is added to the URL as a query parameter when the tab is selected, and is used for tab-selection syncing when multiple :::tabs directives are present on the page.

Rules

• Each :::tab-item requires a label in square brackets.
• :::tab-item directives must be nested inside a :::tabs container.
• The container needs more colons than its tab items (for example, ::::tabs around :::tab-item).
• Tab labels are auto-capitalized and are used for cross-group sync, so use consistent labels across tab groups you want to stay in sync.

Style

• Keep the set of tab labels consistent across the page so synced selection behaves predictably.

Template

Markdown

::::tabs

:::tab-item[Label]

Content.

:::

::::

Examples

Example:

Markdown

::::tabs

:::tab-item[JavaScript]

```js
console.log('hello world');
```

:::

:::tab-item[yaml]

```yaml
note: Programming language tab labels are auto-capitalized.
```

:::

:::tab-item[arbitrary]

Arbitrary **content** _is_ supported.

:::

::::

Output:

JavaScript

JavaScript

console.log('hello world');

YAML

YAML

note: Programming language tab labels are auto-capitalized.

Arbitrary

Arbitrary content is supported.

Used in

Content atoms appear in any page section. Tabs are common in Procedure sections that show the same step in multiple languages or interfaces.