Interactive
Tabs
Group content into tabbed panels to save vertical space.
Live demo
See it in action
Tab design
Underline
Quiet editorial underline — the default.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
Tab design
Pills
Rounded, standalone pill buttons.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
Tab design
Segmented Toggle
A compact switcher — great for Monthly / Yearly.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
Tab design
Boxed / Folder
The classic folder-tab look.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
Tab design
Minimal
Text-only, no chrome.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
Tab design
Popover (floating)
The panel floats above the page.
UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.
Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.
Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.
The markup
Clean, lean code
This is the exact HTML the element outputs, straight from the page builder. No wrapper soup, no inline-style bloat.
<section>
<div class="fw-container">
<div class="fw-row">
<div class="fw-col-12">
<p class="heading-overline heading-overline--kicker text-center">Tab design</p>
<h2 class="heading-title text-center">Underline</h2>
<p class="heading-subtitle text-center">Quiet editorial underline — the default.</p>
<div id="tabs-1" class="tabs tb-eb90e8d7 tabs-container tabs--design-underline design-underline" data-fw-activation="automatic">
<ul class="nav nav-underline justify-content-start" id="tabs-1-tablist" role="tablist">
<li class="nav-item" role="presentation"><button class="nav-link active" id="tabs-1-1-tab" data-fw-toggle="tab" data-fw-target="#tabs-1-1" type="button" role="tab" aria-controls="tabs-1-1" aria-selected="true" tabindex="0">Overview</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="tabs-1-2-tab" data-fw-toggle="tab" data-fw-target="#tabs-1-2" type="button" role="tab" aria-controls="tabs-1-2" aria-selected="false" tabindex="-1">Features</button></li>
<li class="nav-item" role="presentation"><button class="nav-link" id="tabs-1-3-tab" data-fw-toggle="tab" data-fw-target="#tabs-1-3" type="button" role="tab" aria-controls="tabs-1-3" aria-selected="false" tabindex="-1">Pricing</button></li>
</ul>
<div class="tab-content " id="tabs-1-content">
<div class="tab-pane fade show active" id="tabs-1-1" role="tabpanel" tabindex="0" aria-labelledby="tabs-1-1-tab">
<p>UnysonPlus is a free, open-source WordPress framework with a visual page builder, 60+ elements and a Bootstrap 5 theme.</p>
</div>
<div class="tab-pane fade" id="tabs-1-2" role="tabpanel" tabindex="0" aria-labelledby="tabs-1-2-tab">
<p>Drag-and-drop sections and columns, a live editor, global templates, and clean, lean markup with no wrapper bloat.</p>
</div>
<div class="tab-pane fade" id="tabs-1-3" role="tabpanel" tabindex="0" aria-labelledby="tabs-1-3-tab">
<p>Every tier is $0 — the framework, theme and every element are GPL, with no license keys and no renewals.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>To learn more about the Tabs shortcode, please check out the online manual here.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.