Every project I’ve built since 2015 has needed a navigation. Every single one. And every single time, I’ve rebuilt roughly the same thing: a horizontal bar on desktop, a drawer or dropdown on mobile, a pile of media queries in between.

Navalone is my attempt to stop doing that.

The thesis, in one paragraph

One nav. Every screen. A single markup pattern that adapts from a 320px phone to an ultrawide monitor without swapping components, duplicating links, or hiding a second copy of the menu in the DOM. Open source, dependency-free, and accessible by default — not as a checklist item, but as the actual starting point.

Building with an AI partner

This was also my first seriously AI-partnered project. I stayed the architect — the markup pattern, the CSS strategy, and the API surface are mine — but I used AI as a tireless collaborator for the parts I usually put off: edge cases, ARIA state combinations, and the boring-but-critical test matrix.

The AI never got tired of me asking “but what happens when the user presses Escape here?”

That workflow — design sense in one head, a patient collaborator for the combinatorics — is the closest thing to pair programming I’ve found as a freelancer.

The hard part was the keyboard

The responsive layout took a weekend. The keyboard behavior took a month.

• Arrow keys move between top-level items
• Escape closes the current submenu and returns focus to its trigger
• Tab leaves the nav entirely, as it should
• Focus is trapped in the drawer on mobile — and only on mobile

Every one of those interacts with the others, and with aria-expanded, aria-current, and screen-reader announcements. If you’ve never wired this up by hand, I recommend it exactly once.

What shipped

Navalone is on GitHub now — semantic markup, full keyboard support, ARIA baked in, zero dependencies. If your project has a nav (it does), try it, break it, and file an issue. That’s what it’s there for.