This vertical tabs component arranges tabs in a column layout, making it ideal for settings pages, dashboards, and documentation sections.
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>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;
}Notes
- Vertical navigation layout
- Ideal for dashboards and settings pages
- Clean separation of tabs and content
- JavaScript-ready for dynamic switching
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.