The default template used by the Tabs extension is simple and responsive.
The default tabs template
View code <template id="tmpl-tabs">
<% if (children.length) { %>
<div class="my-5">
<ul class="nav nav-tabs overflow-hidden sm:overflow-visible" id="<%= id %>">
<% children.forEach(function(child, index) { %>
<li class="nav-item bg-white sm:bg-transparent">
<a class="nav-link text-inherit font-medium hover:text-primary<% if (initial === index ) { %> is-active text-primary<% } %>" role="tab" data-toggle="tab" data-active-class="is-active text-primary" aria-expanded="<%= initial === index %>" href="#<%= id %>-<%= index %>">
<%= child.title %>
</a>
</li>
<% }); %>
</ul>
<div class="tabs">
<% children.forEach(function(child, index) { %>
<div class="tab list-unstyled p-5 mb-4 bg-white border border-radius-bottom<% if (initial === index ) { %> is-active<% } %>" id="<%= id %>-<%= index %>" role="tab-panel">
<%= child.innerHTML %>
</div>
<% }); %>
</div>
</div>
<% } %>
</template>Use .nav-justified on the list being converted to tabs to have tabs fill the available horizontal space. The following pattern demonstrates the fade effect using the .fade class as described on the Tabs extension page.
Large, justified tabs
View code <template id="tmpl-tabs">
<% if (children.length) { %>
<div class="my-5">
<ul class="nav nav-tabs nav-justified">
<% children.forEach(function(child, index) { %>
<li class="nav-item bg-white sm:bg-transparent">
<a class="nav-link flex align-items-center justify-content-center font-semibold text-inherit font-size-lg px-2 py-4 hover:text-primary<% if (initial === index ) { %> is-active text-primary is-shown<% } %>" data-toggle="tab" data-active-class="text-primary" aria-expanded="<%= initial === index %>" href="#<%= id %>-<%= index %>">
<%= child.title %>
</a>
</li>
<% }); %>
</ul>
<div class="tabs">
<% children.forEach(function(child, index) { %>
<div class="tab list-unstyled p-6 bg-white border border-radius-bottom fade<% if (initial === index ) { %> is-active is-shown<% } %>" id="<%= id %>-<%= index %>" role="tab-panel">
<%= child.innerHTML %>
</div>
<% }) %>
</div>
</div>
<% } %>
</template>In addition to completely changing the overall look-and-feel, you can inject custom HTML (like icons).
Large, justified tabs with icons
View code <template id="tmpl-tabs">
<% if (children.length) { %>
<div class="my-5">
<ul class="nav nav-tabs nav-justified">
<% children.forEach(function(child, index) { %>
<li class="nav-item bg-white sm:bg-transparent">
<a class="nav-link flex align-items-center justify-content-center font-semibold font-size-lg text-gray-700 px-2 py-4 hover:text-gray-800 hover:bg-gray-100<% if (initial === index ) { %> is-active bg-gray-100 md:bg-transparent is-shown<% } %>" data-toggle="tab" data-active-class="bg-gray-100 md:bg-transparent" aria-expanded="<%= initial === index %>" href="#<%= id %>-<%= index %>">
<% if (child.title === 'Andoid') { %>
<svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
<path d="M 7.5 1 C 7.372 1 7.2439844 1.0489844 7.1464844 1.1464844 C 6.9514844 1.3414844 6.9514844 1.6585156 7.1464844 1.8535156 L 8.4570312 3.1640625 C 6.9691108 4.2559188 6 6.0127547 6 8 L 18 8 C 18 6.0127547 17.030889 4.2559188 15.542969 3.1640625 L 16.853516 1.8535156 C 17.048516 1.6575156 17.048516 1.3424844 16.853516 1.1464844 C 16.658516 0.95148437 16.341484 0.95148438 16.146484 1.1464844 L 14.664062 2.6289062 C 13.860616 2.2295595 12.95819 2 12 2 C 11.04181 2 10.139384 2.2295595 9.3359375 2.6289062 L 7.8535156 1.1464844 C 7.7560156 1.0489844 7.628 1 7.5 1 z M 9 5 L 10 5 L 10 6 L 9 6 L 9 5 z M 14 5 L 15 5 L 15 6 L 14 6 L 14 5 z M 4 9 C 3.448 9 3 9.448 3 10 L 3 16 C 3 16.552 3.448 17 4 17 C 4.552 17 5 16.552 5 16 L 5 10 C 5 9.448 4.552 9 4 9 z M 6 9 L 6 17 C 6 17.552 6.448 18 7 18 L 8 18 L 8 21.5 C 8 22.328 8.672 23 9.5 23 C 10.328 23 11 22.328 11 21.5 L 11 18 L 13 18 L 13 21.5 C 13 22.328 13.672 23 14.5 23 C 15.328 23 16 22.328 16 21.5 L 16 18 L 17 18 C 17.552 18 18 17.552 18 17 L 18 9 L 6 9 z M 20 9 C 19.448 9 19 9.448 19 10 L 19 16 C 19 16.552 19.448 17 20 17 C 20.552 17 21 16.552 21 16 L 21 10 C 21 9.448 20.552 9 20 9 z"/>
</svg>
<% } %>
<% if (child.title === 'iOS') { %>
<svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
<path d="M 7.5332031 2.9765625 C 5.0249242 2.9765625 2.9765625 5.0249242 2.9765625 7.5332031 L 2.9765625 16.421875 C 2.9765625 18.930154 5.0249242 20.978516 7.5332031 20.978516 L 16.421875 20.978516 C 18.930154 20.978516 20.978516 18.930154 20.978516 16.421875 L 20.978516 7.5332031 C 20.978516 5.0249242 18.930154 2.9765625 16.421875 2.9765625 L 7.5332031 2.9765625 z M 7.5332031 4.9765625 L 16.421875 4.9765625 C 17.861596 4.9765625 18.978516 6.0934821 18.978516 7.5332031 L 18.978516 16.421875 C 18.978516 17.861596 17.861596 18.978516 16.421875 18.978516 L 7.5332031 18.978516 C 6.0934821 18.978516 4.9765625 17.861596 4.9765625 16.421875 L 4.9765625 7.5332031 C 4.9765625 6.0934821 6.0934821 4.9765625 7.5332031 4.9765625 z M 6.5 9 A 0.5 0.5 0 0 0 6 9.5 A 0.5 0.5 0 0 0 6.5 10 A 0.5 0.5 0 0 0 7 9.5 A 0.5 0.5 0 0 0 6.5 9 z M 10.5 9 C 8.961 9 8 10.152 8 12 C 8 13.844 8.943 15 10.5 15 C 12.053 15 13 13.84 13 12 C 13 10.156 12.046 9 10.5 9 z M 16 9 C 15.442109 9 14.930338 9.180727 14.564453 9.5292969 C 14.198568 9.8778668 14 10.382639 14 10.927734 C 14 11.458086 14.353792 11.887411 14.726562 12.091797 C 15.099334 12.296183 15.501273 12.382761 15.869141 12.482422 C 16.254472 12.586815 16.604109 12.681691 16.792969 12.785156 C 16.981829 12.888622 17 12.891871 17 13.072266 C 17 13.388803 16.9031 13.598546 16.746094 13.748047 C 16.589087 13.897548 16.350292 14 16 14 C 15.676119 14 15.434132 13.906951 15.273438 13.757812 C 15.112742 13.608676 15 13.390833 15 13 L 14 13 C 14 13.609167 14.215695 14.141325 14.59375 14.492188 C 14.971805 14.843049 15.478881 15 16 15 C 16.557708 15 17.069553 14.821155 17.435547 14.472656 C 17.801541 14.124157 18 13.617728 18 13.072266 C 18 12.54166 17.646328 12.112488 17.273438 11.908203 C 16.900547 11.703918 16.498528 11.617185 16.130859 11.517578 C 15.745727 11.413239 15.396009 11.318458 15.207031 11.214844 C 15.018053 11.11123 15 11.107382 15 10.927734 C 15 10.61183 15.096791 10.401633 15.253906 10.251953 C 15.411022 10.102273 15.649891 10 16 10 C 16.323881 10 16.565867 10.093049 16.726562 10.242188 C 16.887258 10.391324 17 10.609167 17 11 L 18 11 C 18 10.390833 17.784305 9.8586753 17.40625 9.5078125 C 17.028195 9.1569497 16.521119 9 16 9 z M 10.5 10 C 11.805 10 12 11.253 12 12 C 12 12.747 11.805 14 10.5 14 C 9.26 14 9 12.912 9 12 C 9 11.253 9.195 10 10.5 10 z M 6 11 L 6 15 L 7 15 L 7 11 L 6 11 z"/>
</svg>
<% } %>
<% if (child.title === 'Windows') { %>
<svg class="fill-current mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24px" height="24px">
<path d="M 19.09375 2.0019531 C 18.948812 1.9952031 18.8025 2.0040469 18.65625 2.0292969 L 12 3.1894531 L 12 11 L 21 11 L 21 4 C 21 3.408 20.740109 2.84975 20.287109 2.46875 C 19.947359 2.183 19.528562 2.0222031 19.09375 2.0019531 z M 10 3.5371094 L 4.65625 4.46875 C 3.69725 4.63675 3 5.4654531 3 6.4394531 L 3 11 L 10 11 L 10 3.5371094 z M 3 13 L 3 17.560547 C 3 18.534547 3.69725 19.36325 4.65625 19.53125 L 10 20.462891 L 10 13 L 3 13 z M 12 13 L 12 20.810547 L 18.65625 21.970703 C 18.77125 21.990703 18.886953 22 19.001953 22 C 19.468953 22 19.923109 21.835297 20.287109 21.529297 C 20.740109 21.148297 21 20.591 21 20 L 21 13 L 12 13 z"/>
</svg>
<% } %>
<%= child.title %>
</a>
</li>
<% }); %>
</ul>
<div class="tabs">
<% children.forEach(function(child, index) { %>
<div class="tab list-unstyled p-6 bg-white border border-radius-bottom fade<% if (initial === index ) { %> is-active is-shown<% } %>" id="<%= id %>-<%= index %>" role="tab-panel">
<%= child.innerHTML %>
</div>
<% }) %>
</div>
</div>
<% } %>
</template>Tabs don’t even need to look like traditional tabs. The following pattern shows tabs using a different pill-style navigation.
Tabs using a pill-style navigation
View code <template id="tmpl-tabs">
<% if (children.length) { %>
<div class="my-6">
<ul class="nav nav-pills nav-justified flex bg-gray-100 mx-auto my-5 p-1 rounded" id="<%= id %>">
<% children.forEach(function(child, index) { %>
<% var isActive = initial === index; %>
<li class="nav-item">
<a class="nav-link rounded py-1 hover:bg-gray-200<% if (isActive) { %> is-active<% } %>" data-toggle="tab" aria-expanded="<%= isActive %>" href="#<%= id %>-<%= index %>">
<%= child.title %>
</a>
</li>
<% }); %>
</ul>
<div class="tabs">
<% children.forEach(function(child, index) { %>
<% var isActive = initial === index; %>
<div class="tab fade list-unstyled bg-white<% if (isActive) { %> is-active is-shown<% } %>" id="<%= id %>-<%= index %>" role="tab-panel">
<%= child.innerHTML %>
</div>
<% }); %>
</div>
</div>
<% } %>
</template>Tabs patterns are custom micro-templates that you can use with our Tabs extension. To have them applied when you create tabs within your article content, simply copy-and-paste the code into the bottom of your Article page template (article_page.hbs).
To learn how to actually create tabs within your article content, refer to the Tabs extension page.
