Shrinivas Kudva Tech Blog

Tabs Shortcode

The tabs shortcode allows you to create tabbed content sections in your Hugo posts or pages.
It supports multiple tabs with titles and content, automatically handling tab switching.

Usage

Basic Tabs

GO 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

{{< tabs >}}
title: Tab 1
content: Content for the first tab.

<!--tab-->
title: Tab 2
content: Content for the second tab.

<!--tab-->
title: Tab 3
content: Content for the third tab.
{{< /tabs >}}

Tabs With Markdown Inside

GO 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{{< tabs >}}
title: Introduction
content: |
  This tab contains **Markdown** content.  
  You can use lists:
  - Item 1
  - Item 2
  - Item 3

<!--tab-->
title: Details
content: |
  More detailed content can go here.  
  Include links: [Hugo](https://gohugo.io)

<!--tab-->
title: Summary
content: Summary text for this section.
{{< /tabs >}}

Parameters

ParameterRequiredDefaultDescription
titleYes-Title of the tab, displayed on the tab button
contentYes-Content inside the tab (supports Markdown)
Inner contentYes-All tabs separated by `<!--tab-->` comments
Table: Tabs Shortcode Parameters

Note: The first tab is active by default.

Examples

Simple Tab Example