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

​
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
​
width
Number
Set the width of this component (in percent) relative to the page width

​
Allowed Children