This is a demo announcement, dismissible and configured in site.json.
Switch to latest

Tabs

Tabbed content with synced groups and a persisted choice, ideal for OS or language variants.

Tabs show alternative versions of the same content side by side, so readers only see what applies to them. Common uses: OS-specific install commands, language-specific code samples and before/after comparisons.

Usage

text 
{{< tabs "os" >}}
{{< tab "Linux" >}} …content… {{< /tab >}}
{{< tab "macOS" >}} …content… {{< /tab >}}
{{< /tabs >}}

The optional argument ("os") is a sync group: every block with the same group switches together site-wide, and the choice is remembered across visits.

Synced group

Switch a tab below and watch the second block flip with it:

bash 
sudo apt install hugo

Verify with hugo version. Panels hold any Markdown, not just code.

Independent tabs

Omit the group argument for a standalone block that neither syncs nor persists:

text 
{{< tabs >}}
{{< tab "JSON" >}}
```json
{ "title": "My Docs" }
```
{{< /tab >}}
{{< tab "TOML" >}}
```toml
title = "My Docs"
```
{{< /tab >}}
{{< /tabs >}}
json 
{ "title": "My Docs" }

Notes

  • Tabs are keyboard-accessible: focus a tab, then use ←/→/Home/End.
  • All panels are server-rendered, so their content is searchable and visible without JavaScript. All panels expand when printing.
  • The behavior script loads only on pages that use the shortcode.
Edit this page