Tabs

HTML

<!-- TABS Component -->
<nav class="kx-tabs">
    <ol class="kx-tabs__list">
        <li class="kx-tabs__item">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Home</span>
            </a>
        </li>
        <li class="kx-tabs__item kx-is-active">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Applications</span>
            </a>
        </li>
        <li class="kx-tabs__item">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">GSN Management</span>
            </a>
        </li>
        <li class="kx-tabs__item">
            <a href="#" class="kx-tabs__label">
                
                <span class="kx-tabs__txt">Node Offshore</span>
            </a>
        </li>
    </ol>
</nav>

View

<!-- TABS Component -->
<nav class="kx-tabs{% if theme %} kx-tabs--theme-{{ theme }}{% endif %}">
    <ol class="kx-tabs__list">
        {% for item in items -%}
        <li class="kx-tabs__item{% if item.active %} kx-is-active{% endif %}">
            <a href="{{ item.href }}" class="kx-tabs__label">
                {% if item.icon %}
                {% render '@icon', item.icon %}
                {% endif %}
                <span class="kx-tabs__txt">{{ item.txt }}</span>
            </a>
        </li>
        {%- endfor -%}
    </ol>
</nav>