These shortcodes allows you to easily add tabs to your markdown files. There is no hardcoded limit to the number of tab groups you can have or the amount of tabs in a tab group.
Continue reading if using Bootstrap 4 as these shortcodes were originally developed using Bootstrap 4.
The following branch, bootstrap5 should be used if you'd like to use these shortcodes with Bootstrap 5.
These shortcodes can be easily modified to work with any framework or custom CSS. Please take a look at the demo and the code in tabs.html and tab.html for a better understanding on how it works and what you'll need to change.
git clone -b master https://github.com/rvanhorn/hugo-dynamic-tabs themes/hugo-dynamic-tabs
.theme
list variable,hugo-dynamic-tabs
. Please note,hugo-dynamic-tabs
needs to be listed before your actual theme. config.yaml Example
theme:
- hugo-dynamic-tabs
- my-theme
config.toml Example
theme = ["hugo-dynamic-tabs", "my-theme"]
You need at least one nested tab shortcode inside the tabs shortcode for this theme component to properly work. Please see the Shortcodes Explanation section for information on what each variable does.
{{< tabs tabTotal="1">}}
{{< tab tabName="Tab 1" >}}
**Tab 1 Content**
{{< /tab >}}
{{< /tabs >}}
The following is an example of Hugo Dynamic Tabs being used with multiple nested tab shortcodes.
{{< 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 >}}
Hugo Dynamic Tabs uses two shortcodes each with their own user-defined variables that generate each tab group and each individual tab within that group.
This is the parent shortcodes 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 three. |
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. |
This is a child shortcode that is nested in the 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 use.
Variable | Description |
---|---|
tabName | This variable holds the name of the tab. |
I've created a simple demo showing the shortcode in action. Please note, this demo site was built using Bootstrap 4 so your output may vary.
You can find the code in the demo folder in the repo.
2.00 - January 15th, 2022
1.11 - April 11th, 2020
1.11 - May 3rd, 2019
1.10 - April 26th, 2019
1.00 - April 26th, 2019
Copyright ©2019-©2022, Richard Van Horn.
Thanks to the Hugo team for making this possible!