Vertical Tabs

A vertical tabs component built with pure HTML and CSS that aligns tab controls in a side column while displaying content panels beside them. It enhances structured content organization and navigation clarity in wider layouts.

Usage

Use this component when interfaces require side aligned content switching, such as documentation layouts, settings panels, dashboards, or feature breakdown sections that benefit from persistent tab visibility.

Implementation

The tab switching behavior is handled using CSS state selectors and controlled content visibility, while layout alignment is achieved through flex or grid based column structures. Responsive rules ensure stacking behavior on smaller screens.

HTML

<div class="ss-vertical-tabs">
  <div class="tab-list">
    <button class="active">General</button>
    <button>Security</button>
    <button>Billing</button>
  </div>

  <div class="tab-content">
    <p>Tab content goes here.</p>
  </div>
</div>

<div class="ss-vertical-tabs">
  <div class="tab-list">
    <button class="active">General</button>
    <button>Security</button>
    <button>Billing</button>
  </div>

  <div class="tab-content">
    <p>Tab content goes here.</p>
  </div>
</div>

CSS

.ss-vertical-tabs{
  display:flex;
  gap:24px;
}

.tab-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tab-list button{
  padding:10px 16px;
  border:none;
  background:#e5e7eb;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
}

.tab-list button.active{
  background:#2563eb;
  color:#ffffff;
}

.tab-content{
  padding:20px;
  background:#f8fafc;
  border-radius:12px;
  flex:1;
}

.ss-vertical-tabs{
  display:flex;
  gap:24px;
}

.tab-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.tab-list button{
  padding:10px 16px;
  border:none;
  background:#e5e7eb;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
}

.tab-list button.active{
  background:#2563eb;
  color:#ffffff;
}

.tab-content{
  padding:20px;
  background:#f8fafc;
  border-radius:12px;
  flex:1;
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses side aligned tab navigation
• Enhances content segmentation clarity
• Fully responsive across breakpoints
• Suitable for dashboards and documentation pages
• Easy to customize alignment and spacing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.