docs/content/contribute/components/tabs.md

description	title	toc_max
components and formatting examples used in Docker's docs	Tabs	3

The tabs component consists of two shortcodes:

• {{</* tabs */>}}
• {{</* tab name="name of the tab" */>}}

The {{</* tabs */>}} shortcode is a parent, component, wrapping a number of tabs. Each {{</* tab */>}} is given a name using the name attribute.

You can optionally specify a group attribute for the tabs wrapper to indicate that a tab section should belong to a group of tabs. See Groups.

Example

{{< tabs >}} {{< tab name="JavaScript">}}

console.log("hello world")

{{< /tab >}} {{< tab name="Go">}}

fmt.Println("hello world")

{{< /tab >}} {{< /tabs >}}

Markup

{{</* tabs */>}}
{{</* tab name="JavaScript" */>}}

```js
console.log("hello world")
```

{{</* /tab */>}}
{{</* tab name="Go" */>}}

```go
fmt.Println("hello world")
```

{{</* /tab */>}}
{{</* /tabs */>}}

Groups

You can optionally specify a tab group on the tabs shortcode. Doing so will synchronize the tab selection for all of the tabs that belong to the same group.

Tab group example

The following example shows two tab sections belonging to the same group.

{{< tabs group="code" >}} {{< tab name="JavaScript">}}

console.log("hello world")

{{< /tab >}} {{< tab name="Go">}}

fmt.Println("hello world")

{{< /tab >}} {{< /tabs >}}

{{< tabs group="code" >}} {{< tab name="JavaScript">}}

const res = await fetch("/users/1")

{{< /tab >}} {{< tab name="Go">}}

resp, err := http.Get("/users/1")

{{< /tab >}} {{< /tabs >}}