Crazy Navbar

A floating navbar with an animated active underline.

Navigation bars usually swap a class between links — the old one loses its style, the new one gets it. There's no connection between the two states. I wanted the active indicator to slide from one link to the next, so the underline draws itself in when you land on a page and slides horizontally when you navigate. It feels carried, not placed. The links float on a pill backdrop, and the underline width matches each link's text — short word, short underline. Layout animation handles the travel.