Tab Group

Tab groups let you present related content—such as code examples, configurations, or platform-specific instructions—without duplicating text or overwhelming the page.

While tab groups can reduce repetition, overusing them can make content harder to read and navigate. Important information may become hidden behind tabs, forcing readers to click around to fully understand a topic. Use tab groups when the content is truly alternative or mutually exclusive—not when it should be read together.

Usage

Most content can be rendered within a tab group, but we have seen bugs in the past with more complex elements.

You need to “nest” shortcodes to use tab groups. A very basic example below has different text in each group.

Basic

{{< tabs name="number tab groups" >}}

  {{< tab name="Tab group 1" >}}
    Tab group 1
  {{< /tab >}}

  {{< tab name="Tab group 2" >}}
    Tab group 2
  {{< /tab >}}

{{< /tabs >}}

Complicated components

When populated tab groups with short codes, whitespace is very important.

Shortcode syntax must be in line with the tab shortcode itself to render properly.

console.log("This is an example code block in a tab group");

It seems to be impossible to render % style shortcodes in a codeblock. (A rendering hugo in a hugo code fence problem 😐).

Please click on “View Source” at the bottom of this page to see the above examples source code.