← All elements
<div class="dp"><input type="radio" name="d" id="d1" checked><label for="d1"></label><input type="radio" name="d" id="d2"><label for="d2"></label><input type="radio" name="d" id="d3"><label for="d3"></label><input type="radio" name="d" id="d4"><label for="d4"></label></div>About this navigation bar
A row of dots where the active one stretches into a pill, a staple of onboarding screens.
How it works
Hidden radio inputs have labels shaped like small dots. The checked label widens from 10px to 34px with a springy transition, turning the dot into a pill.
Ways to customise it
- Add more dots.
- Edit the 34px width.
- Change the sky-blue colour.
Good to know
Give each dot an accessible name in real use. The controls are real radios, so keyboard use works.
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.