---
title: Tabs
description: Tabbed content is created using the tab-set directive with individual tab-item blocks for each tab's content. You can embed other directives, like admonitions...
url: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/3805/syntax/tabs
products:
  - Elastic Docs Builder
---

# Tabs
Tabbed content is created using the `tab-set` directive with individual `tab-item` blocks for each tab's content. You can embed other directives, like admonitions directly in tabs.

## Tabs Simple


### Example


#### Syntax

```markdown
::::{tab-set}

:::{tab-item} Tab #1 title
This is where the content for tab #1 goes.
:::

:::{tab-item} Tab #2 title
This is where the content for tab #2 goes.
:::

::::
```


#### Example

<tab-set>
  <tab-item title="Tab #1 title">
    This is where the content for tab #1 goes.
  </tab-item>

  <tab-item title="Tab #2 title">
    This is where the content for tab #2 goes.
  </tab-item>
</tab-set>


## Tab Groups

Tabs can be grouped together by setting the `group` attribute to the same value for each `tab-set`.
This allows for multiple sets of tabs to be controlled together.
You need to set both the `group` and `sync` attributes to the same value for each `tab-item` to sync the tabs.
This means tabs with the same group and the same sync value will be selected together.

### Example

In the following example we have three tab sets, but only the first two are grouped together.
Hence, the first two tab sets will be in sync, but the third tab set will not be in sync with the first two.

#### Syntax

```markdown
::::{tab-set}
:group: languages
:::{tab-item} Java
:sync: java
Content for Java tab
:::

:::{tab-item} Golang
:sync: golang
Content for Golang tab
:::

:::{tab-item} C#
:sync: csharp
Content for C# tab
:::

::::

::::{tab-set}
:group: languages
:::{tab-item} Java
:sync: java
Content for Java tab
:::

:::{tab-item} Golang
:sync: golang
Content for Golang tab
:::

:::{tab-item} C#
:sync: csharp
Content for C# tab
:::

::::
```


#### Result


##### Grouped Tabs

<tab-set>
  <tab-item title="Java">
    Content for Java tab
  </tab-item>

  <tab-item title="Golang">
    Content for Golang tab
  </tab-item>

  <tab-item title="C#">
    Content for C# tab
  </tab-item>
</tab-set>

<tab-set>
  <tab-item title="Java">
    Other content for Java tab
  </tab-item>

  <tab-item title="Golang">
    Other content for Golang tab
  </tab-item>

  <tab-item title="C#">
    Other content for C# tab
  </tab-item>
</tab-set>


##### Ungrouped Tabs

<tab-set>
  <tab-item title="Java">
    Other content for Java tab that is not in the same group
  </tab-item>

  <tab-item title="Golang">
    Other content for Golang tab that is not in the same group
  </tab-item>

  <tab-item title="C#">
    Other content for Golang tab that is not in the same group
  </tab-item>
</tab-set>