← All elements
<nav class="bt"><input type="radio" name="t" id="t1" checked><label for="t1"><i>⌂</i></label><input type="radio" name="t" id="t2"><label for="t2"><i>♡</i></label><input type="radio" name="t" id="t3"><label for="t3"><i>✉</i></label><input type="radio" name="t" id="t4"><label for="t4"><i>☺</i></label></nav>About this menu
A mobile-style tab bar where the active icon lifts into a floating circle, driven by radio inputs.
How it works
Four radio inputs are hidden and their labels hold icons. The checked icon translates up and gets a coloured circle with a ring in the bar's colour, which creates a notch effect without any SVG.
Ways to customise it
- Edit the icons.
- Change the amber highlight.
- Add a fifth tab by widening the bar.
Good to know
Radios give keyboard support with arrow keys. Add labels or aria-labels for the icons in real use.
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.