← All elements
<div class="tb"><input type="radio" name="x" id="x1" checked><label for="x1">All <em>24</em></label><input type="radio" name="x" id="x2"><label for="x2">Open <em>7</em></label><input type="radio" name="x" id="x3"><label for="x3">Done <em>17</em></label><i></i></div>About this navigation bar
A segmented tab row with count badges and a sliding underline, switched by radio buttons.
How it works
Three radio inputs choose the tab and a single underline element moves with translate based on the checked sibling. Count badges are small pills whose colour changes when active.
Ways to customise it
- Change the tab names and counts.
- Edit the 92px widths if labels change.
- Change the teal.
Good to know
Radios provide keyboard operation. For real tab panels use role tablist and connect panels with aria-controls.
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.