← All elements
<nav class="sp"><input type="radio" name="n" id="n1" checked><label for="n1">Home</label><input type="radio" name="n" id="n2"><label for="n2">Work</label><input type="radio" name="n" id="n3"><label for="n3">Blog</label><i class="pill"></i></nav>About this menu
A tab-style menu where a coloured pill glides under the chosen item, driven by radio inputs and sibling selectors.
How it works
The tabs are radio labels, and a single pill element sits behind them. Selectors like #n3:checked ~ .pill move it with a translateX of one or two label widths, and a transition with a springy easing makes it glide. The text colour of the checked label changes so it reads well on the pill.
Ways to customise it
- Change the width of 74px in both the labels and the pill.
- Edit the gradient on the pill.
- Add another tab and extend the translateX rules.
Good to know
The radios give arrow-key support. Labels and pill share the same width, so keep them equal. For a real site, links with an aria-current state are more usual.
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.