Tabs

Basic

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Contact" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Contact content

Pills Variant

{% component "Tabs" variant="pills" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Underline Variant

{% component "Tabs" variant="underline" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Fill

{% component "Tabs" fill=True %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Longer title" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Link" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Justified

{% component "Tabs" justified=True %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Tabs With Disabled Tab

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Disabled" disabled=True %}
                Disabled content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Disabled content

Manual Composition With Tab Container

{% component "TabContainer" active_key="profile" %}
              {% component "Nav" variant="tabs" as_="ul" attrs:role="tablist" %}
                {% component "NavItem" as_="li" attrs:role="presentation" %}
                  {% component "NavLink" as_="button" event_key="home" %}
                    Home
                  {% endcomponent %}
                {% endcomponent %}
                {% component "NavItem" as_="li" attrs:role="presentation" %}
                  {% component "NavLink" as_="button" event_key="profile" %}
                    Profile
                  {% endcomponent %}
                {% endcomponent %}
              {% endcomponent %}
              {% component "TabContent" %}
                {% component "TabPane" event_key="home" %}
                  Home content
                {% endcomponent %}
                {% component "TabPane" event_key="profile" %}
                  Profile content
                {% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content

Manual Composition With Disabled Tab

{% component "TabContainer" active_key="home" %}
              {% component "Nav" variant="tabs" as_="ul" attrs:role="tablist" %}
                {% component "NavItem" as_="li" attrs:role="presentation" %}
                  {% component "NavLink" as_="button" event_key="home" %}
                    Home
                  {% endcomponent %}
                {% endcomponent %}
                {% component "NavItem" as_="li" attrs:role="presentation" %}
                  {% component "NavLink" as_="button" event_key="settings" disabled=True %}
                    Settings
                  {% endcomponent %}
                {% endcomponent %}
              {% endcomponent %}
              {% component "TabContent" %}
                {% component "TabPane" event_key="home" %}
                  Home content
                {% endcomponent %}
                {% component "TabPane" event_key="settings" %}
                  Settings content
                {% endcomponent %}
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Settings content

Tabs With Active Tab

{% component "Tabs" %}
              {% component "Tab" title="Home" %}
                Home content
              {% endcomponent %}
              {% component "Tab" title="Profile" active=True %}
                Profile content
              {% endcomponent %}
              {% component "Tab" title="Contact" %}
                Contact content
              {% endcomponent %}
            {% endcomponent %}

Preview:

Home content
Profile content
Contact content