← All Examples

Vertical Tabs

Vertical tabbed navigation using radio inputs and the :checked pseudo-class.

Published June 9, 2026

Demo

Overview

A quick introduction to the product. Use vertical tabs to organize content into logical sections without page reloads.

Features

Zero JavaScript, accessible via keyboard, fully themeable with CSS custom properties. Works on all modern browsers.

Pricing

Free and open source. Use it in personal and commercial projects. No attribution required.

Support

Open an issue on GitHub or check the documentation. Community-driven support available 24/7.

HTML

<input type="radio" name="vtab" id="vtab1" checked>
<input type="radio" name="vtab" id="vtab2">

<div class="vtab-layout">
  <nav class="vtab-nav">
    <label for="vtab1">Tab One</label>
    <label for="vtab2">Tab Two</label>
  </nav>
  <div class="vtab-panels">
    <div class="vtab-panel vtab-panel-1">Content One</div>
    <div class="vtab-panel vtab-panel-2">Content Two</div>
  </div>
</div>

CSS

.vtab-panel { display: none; }

#vtab1:checked ~ .vtab-layout .vtab-panel-1,
#vtab2:checked ~ .vtab-layout .vtab-panel-2 {
  display: block;
}

#vtab1:checked ~ .vtab-layout label[for="vtab1"],
#vtab2:checked ~ .vtab-layout label[for="vtab2"] {
  background: var(--accent-dim);
  color: var(--accent);
}

How it works

The same radio-input pattern used in horizontal tabs works just as well vertically. Hidden radio inputs manage state. CSS grid creates a two-column layout with the nav on the left and content on the right. The :checked pseudo-class highlights the active nav label and shows the matching panel using the ~ sibling combinator targeting descendant panel elements.