The tabs shortcode leverages Bootstrap’s Tabs styling to easily add Tabs to your markdown content. The shortcode is actually a combination of two separate shortcodes (tab and tabs) working together.

You need a minimum of one tab shortcode nested inside a tabs shortcode for the component to function:

  {{< tabs tabTotal="1">}}
{{% tab tabName="Tab 1" %}}

**Tab 1 Content**

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

Basic Tabs

The following example demonstrates how to create a basic multi tab navigation component using the tabs and tab shortcodes.

  {{< tabs tabTotal="3">}}
{{% tab tabName="Windows" %}}

**Windows Content**

Example content specific to **Windows** operating systems

{{% /tab %}}
{{% tab tabName="MacOS" %}}

**MacOS Content**

Example content specific to **Mac** operating systems

{{% /tab %}}
{{% tab tabName="Linux" %}}

**Linux Content**

Example content specific to **Linux** operating systems

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

Renders:

Windows Content

Example content specific to Windows operating systems

MacOS Content

Example content specific to Mac operating systems

Linux Content

Example content specific to Linux operating systems

Right Aligned Tabs 

  {{< tabs tabTotal="3" tabRightAlign="2">}}
{{% tab tabName="Tab 1" %}}

**Tab 1 Content**

{{% /tab %}}
{{% tab tabName="Tab 2" %}}

**Tab 2 Content**

{{% /tab %}}
{{% tab tabName="Tab 3" %}}

**Tab 3 Content**

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

Renders:

Tab 1 Content

Tab 2 Content

Tab 3 Content

How does it work?

tabs.html

This is the parent shortcode that wraps around all nested tab shortcodes in the tab group and generates the tab navigation.

Variable Description
tabTotal This variable is used to generate the tab navigation. Simply set it to the amount of tab shortcodes you have. In the above example, since there are three nested tab shortcodes, you would set tabTotal to 3.
tabRightAlign This is an optional variable that if used will right align the tab number you inputted and all tabs after it. In the above example, since tabRightAlign is set to two, tabs 2 and 3 will be right aligned.

tab.html

This is a child shortcode that is nested inside tabs shortcodes. Each tab shortcode equals one tab so add as many as you need. Please note, make sure tabTotal in the tabs shortcode is equal to the amount of tab shortcodes you define.

Variable Description
tabName This variable defines the title of the tab.

Credit

Both tab and tabs shortcodes documented above are a modified versions of the open source Hugo Dynamic Tabs shortcodes. Thank you rvanhorn 👍.

Last updated 26 Jul 2024, 13:46 +0800 . history