Tabs Examples - Form Widgets

1. Basic Horizontal Tabs

Standard tabs layout. The first tab is active by default.

User Profile

Manage your public profile information here.

Username

Account Settings

Update your password and security preferences.

New Password

Messages

You have no new messages.

HTML

<div class="fw-tabs">
  <ul class="fw-tab-list">
    <li><a href="#profile">Profile</a></li>
    <li><a href="#settings">Settings</a></li>
    <li><a href="#messages">Messages</a></li>
  </ul>
  <div class="fw-tab-panel" id="profile">
    <!-- Profile content -->
  </div>
  <!-- Other panels... -->
</div>

2. Vertical Tabs

Side-by-side layout using data-orientation="vertical".

General

General system settings and configurations.

Privacy

Control who can see your activity and personal info.

Notifications

Manage email and push notification preferences.

HTML

<div class="fw-tabs" data-orientation="vertical">
  <ul class="fw-tab-list">
    <li><a href="#general">General</a></li>
    <li><a href="#privacy">Privacy</a></li>
  </ul>
  <div class="fw-tab-panel" id="general">
    <!-- General content -->
  </div>
</div>