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

Buttons

Solid, standalone 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

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.

Orientation

Vertical

The nav sits in a side column with the panels beside it — a CSS-grid split.

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.

Layout

Media panel

A list of tabs beside a switching image — the list / image split is a CSS grid.

Overview

The image switches with the active tab — a feature / product showcase.

Features

Each tab shows its own image beside the list, laid out on a CSS grid.

Pricing

Free and open source — every tier is $0.

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 class="fw-flexbox fw-flex fw-contained fw-collapse">
	<div id="tabs-41" class="tabs tb-ab388317 tabs-container tabs--design-underline design-underline" data-fw-activation="automatic">
		<div class="tabs-vertical">
			<div class="tabs-vertical__nav">
				<ul class="nav nav-underline flex-column" id="tabs-41-tablist" role="tablist" aria-orientation="vertical">
					<li class="nav-item" role="presentation"><button class="nav-link active" id="tabs-41-1-tab" data-fw-toggle="tab" data-fw-target="#tabs-41-1" type="button" role="tab" aria-controls="tabs-41-1" aria-selected="true" tabindex="0">Overview</button></li>
					<li class="nav-item" role="presentation"><button class="nav-link" id="tabs-41-2-tab" data-fw-toggle="tab" data-fw-target="#tabs-41-2" type="button" role="tab" aria-controls="tabs-41-2" aria-selected="false" tabindex="-1">Elements</button></li>
				</ul>
			</div>
			<div class="tabs-vertical__panes">
				<div class="tab-content " id="tabs-41-content">
					<div class="tab-pane fade show active" id="tabs-41-1" role="tabpanel" tabindex="0" aria-labelledby="tabs-41-1-tab">
						<p>A free, open-source WordPress framework.</p>
					</div>
					<div class="tab-pane fade" id="tabs-41-2" role="tabpanel" tabindex="0" aria-labelledby="tabs-41-2-tab">
						<p>60+ drag-and-drop builder elements.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>

To learn more about the Tabs shortcode, please check out the online manual here.