← All elements
<div class="vt"><input type="radio" name="v" id="v1" checked><label for="v1">Overview</label><input type="radio" name="v" id="v2"><label for="v2">Specs</label><input type="radio" name="v" id="v3"><label for="v3">Reviews</label><div class="pn n1">A short summary of the product.</div><div class="pn n2">Weight, size and materials.</div><div class="pn n3">What people are saying.</div></div>About this navigation bar
Side-by-side vertical tabs where each radio selects a panel, built with sibling combinators and a grid layout.
How it works
The component is a two-column grid with the tab labels in column one and the panels in column two. The panels share the same grid cell and are hidden, and selectors like #v2:checked ~ .n2 show the panel that matches the chosen radio. The checked label gets a thicker left border and tinted background.
Ways to customise it
- Change the column width of 96px to fit longer tab names.
- Add a tab by adding a radio, label, panel and selector, and increasing the grid rows.
- Edit the accent colour on the left border.
Good to know
Radios give arrow-key movement between tabs. For long, data-heavy content consider proper ARIA tab roles with script. The grid layout works in all current browsers.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.