The tabs shortcode allows you to create tabbed content with various styles and layouts.
Quick Start
The tabs shortcode works together with the tab shortcode to create organized tabbed content. The tabs shortcode serves as the container, while individual tab shortcodes define each tab’s content.
1
2
3
4
5
| {{< tabs >}}
{{% tab title="Tab 1" %}}Content for tab 1{{% /tab %}}
{{% tab title="Tab 2" %}}Content for tab 2{{% /tab %}}
{{% tab title="Tab 3" %}}Content for tab 3{{% /tab %}}
{{< /tabs >}}
|
The rendered output looks like this:
Content for tab 1
Content for tab 2
Content for tab 3
Examples
Underline style tab 1 content
Underline style tab 2 content, this is the default selected tab.
Underline style tab 3 content
1
2
3
4
5
| {{< tabs placement="bottom" defaultTab=1 >}}
{{% tab title="Tab 1" %}}Underline style tab 1 content{{% /tab %}}
{{% tab title="Tab 2" %}}Underline style tab 2 content, this is the **default selected** tab{{% /tab %}}
{{% tab title="Tab 3" %}}Underline style tab 3 content{{% /tab %}}
{{< /tabs >}}
|
Pill style tab 1 content
Pill style tab 2 content
Pill style tab 3 content
1
2
3
4
5
| {{< tabs type="pill" placement="start" >}}
{{% tab title="Tab 1" %}}Pill style tab 1 content{{% /tab %}}
{{% tab title="Tab 2" %}}Pill style tab 2 content{{% /tab %}}
{{% tab title="Tab 3" %}}Pill style tab 3 content{{% /tab %}}
{{< /tabs >}}
|
Card style tab 1 content
Card style tab 2 content
Card style tab 3 content
1
2
3
4
5
| {{< tabs type="card" placement="end" >}}
{{% tab title="Tab 1" %}}Card style tab 1 content{{% /tab %}}
{{% tab title="Tab 2" %}}Card style tab 2 content{{% /tab %}}
{{% tab title="Tab 3" %}}Card style tab 3 content{{% /tab %}}
{{< /tabs >}}
|
Segment style tab 1 content
Segment style tab 2 content
Segment style tab 3 content
1
2
3
4
5
| {{< tabs type="segment" >}}
{{% tab title="Tab 1" %}}Segment style tab 1 content{{% /tab %}}
{{% tab title="Tab 2" %}}Segment style tab 2 content{{% /tab %}}
{{% tab title="Tab 3" %}}Segment style tab 3 content{{% /tab %}}
{{< /tabs >}}
|
Parameters
| Parameter | Description | Type | Options | Default |
|---|
defaultTab | Default active tab index | integer | 0 ~ count - 1 | 0 |
type | Tab style type | string | underline, pill, card, segment | underline |
placement | Tab placement position relative to content, not effective for segment type tabs | string | top, bottom, start, end | top |
| Parameter | Description | Type | Options | Default |
|---|
title | Title text displayed on the tab button | string | any string | UntitledN |
FixItTheme for Hugo