Tabs

The Tabs component creates a tabbed interface that hides content behind a selectable button.

{% embed '@Forumify/components/tabs.html.twig' %}
    {%block tabs %}
        ...
    {% endblock %}
    {% block tabpanels %}
        ...
    {% endblock %}
{% endembed %}

This component utilises the twig embed tag which allows you to include another template's contents. Learn more about twig embed here

The intended structure for tabs is below.

{% embed '@Forumify/components/tabs.html.twig' %}
    {%block tabs %}
        <button class="btn-link" data-tab-id="tab1">Tab 1</button>
        <button class="btn-link" data-tab-id="tab2">Tab 2</button>
    {% endblock %}
    {% block tabpanels %}
        <div id="tab1">
            ...
        </div>
        <div id="tab2">
            ...
        </div>
    {% endblock %}
{% endembed %}

{% embed '@Forumify/components/tabs.html.twig' %}
    {%block tabs %}
        <button class="btn-link" data-tab-id="home">Home</button>
        <button class="btn-link" data-tab-id="about-us">About Us</button>
    {% endblock %}
    {% block tabpanels %}
        <div id="home">
            ...
        </div>
        <div id="about-us">
            ...
        </div>
    {% endblock %}
{% endembed %}

data-tab-id links the tab button to the tab panel, therefore ensure both the data-tab-id and div id="" are the same. We recommend using the kebab-case naming convention for this, ie: about-us, meet-the-team, user-profile.

Error 1: A template that extends another one cannot include content outside Twig blocks.

If you're coming across this error, you're likely trying to use a div outside the twig blocks, ie:

{% embed '@Forumify/components/tabs.html.twig' %}
    <div class="flex">
        {%block tabs %}
            <button class="btn-link" data-tab-id="home">Home</button>
            <button class="btn-link" data-tab-id="about-us">About Us</button>                    
        {% endblock %}
        {% block tabpanels %}
            <div id="home">
                ...1
            </div>
            <div id="about-us">
                ...2
            </div>
        {% endblock %}
    </div>
{% endembed %}

If you need this flexibility, you can write your own twig skeleton and apply the stimulus controller and targets manually. See tabs component.