Skip to main content
Basic Usage 
{% tabs %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}

​
Examples

​
Basic Usage

Basic Usage 
{% tabs %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}

​
Well Variant

Well Variant 
{% tabs variant="well" %}
	{% tab title="Tab 1" icon="trending-up" %}
		Content for tab 1
	{% /tab %}
	{% tab title="Tab 2" icon="alert-circle" %}
		Content for tab 2
	{% /tab %}
{% /tabs %}

​
Attributes

​
variant
string
default:"default"
Visual style variant of the tabsAllowed values:
  • default
  • well
​
full_width
boolean
default:"false"
Whether the tabs should take the full width of their container
​
color
string
Custom color for active tab text and underline. Uses CSS color values.
​
align
string
default:"left"
Horizontal alignment of tabs. Note: align right only affects the default variant.Allowed values:
  • left
  • right
​
print_break
string
default:"auto"
Controls page breaks inside this component in PDF exports. auto allows content to flow across pages, avoid attempts to keep all content together on one page.Allowed values:
  • auto
  • avoid
​
width
number
Set the width of this component (in percent) relative to the page width

​
Allowed Children