☰
The nav patterns you need
From classic modern layouts to bold and experimental patterns, TidyNav offers a unique collection of navbars inspired by some of the top websites today.
A gallery of
beautiful & accessible
Webflow navbar
templates
Pick the template that suits your project best, make a few adjustments if needed, and you are done in minutes — not hours.
Stop building navbars from scratch.
Let's face it: Working with Webflow's native navbar element can be quite challenging sometimes. And rolling your own navigation that is both responsiveandaccessible is no easy feat. TidyNav gives you a library of production-ready navbars that you can drop into your project so you can stop spending hours wrestling with Webflow to build the perfect navigation.
The nav patterns you need
◉
Curated themes included
Modern, Glass, and Bold themes ship with every template, so you can pick a production-ready template that can be dropped in as-is or easily customized to match your brand.
⌘
Real Webflow elements
Every template is inserted as a component made up of real Webflow elements that you can easily edit, style, and customize to fit your exact needs.
□
Blank Wireframe base
Need a fully custom look? Start from the minimal Wireframe version that includes accessibility and mobile menu behavior. Just add your own styles as needed and save hours of boilerplate work.
↔
Client First class names
All templates use the popular Client First class naming conventions so you can quickly understand the structure and make changes without having to learn a brand new system.
⚡
Thoughtful GSAP animations
Every navbar theme comes with elegant default motion settings using GSAP, but you can easily adjust the speed, easing, and direction of every animation to match your unique vision.
✓
Accessibility is foundational
Every TidyNav template is built and tested to meet WCAG 2.1 AA accessibility standards, giving you a solid, accessible foundation right out of the box—without having to troubleshoot the common pitfalls of a custom-built navbar.
{}
Developer friendly
The TidyNav JS library provides a simple, yet powerful API for customizing motion, accessibility, and menu behavior. All open-source, and easy to opt out if you ever need to.
@
Fast email support
Need a hand? Send us an email and we will usually respond within 24 hours with practical help for your setup, styling, or template questions.
Want to know more?
Here's a list of frequently asked questions. Have a question of your own?Get in touch.
What is TidyNav?+−
TidyNav is a Webflow extension with a curated collection of beautiful, accessible navbar templates. Pick a layout, choose a theme, drop it into your project, and customize it however you like.
What are themes?+−
Themes are different visual styles available for each template, such as Modern, Glass, or Bold.
Use one as-is or treat it as a starting point. Colors, typography, spacing, and other styles can all be adjusted to match your project.
What if I don’t like any of the existing themes?+−
No problem—that’s exactly what the Wireframe theme is for.
Start with a clean, fully functional foundation and style it however you want. You still get the responsive layout, accessible behavior, and mobile navigation without being locked into a particular visual direction.
Are all themes WCAG 2.1 compliant?+−
Yes. Every TidyNav template is built and tested to meet WCAG 2.1 AA accessibility requirements, including keyboard navigation, focus management, semantic markup, and screen-reader-friendly interactions.
Of course, changes made after inserting a template—such as custom colors or removing accessibility attributes—can affect the final result.
Can I use TidyNav on client projects?+−
Absolutely. That’s the whole point.
Use the free templates on as many personal or client projects as you need. No more rebuilding the same navbar from scratch or fighting with Webflow’s native Navbar component every time a new project starts.
Okay, so what’s the catch? How is this free?+−
You got me: TidyNav currently includes three free templates, with more advanced templates planned for a future Premium library.
The original free templates will stay free forever, and more free options may be added alongside the premium collection.
The long-term goal is to build a large library with enough layouts and styles that you can quickly find the right navbar for almost any project.
Premium pricing is still being worked out, but the current plan is a one-time payment rather than another subscription slowly nibbling away at your bank account.
The first premium templates in development include mega menus, multi-level dropdowns, and more advanced navigation layouts with polished interactions.
Have an idea for a template?Send it over here.
Will template updates break my current navbar?+−
Nope.
Once a template is inserted into Webflow, it becomes part of your project. Future updates to the TidyNav library won’t overwrite your navbar, conflict with your custom styles, or mysteriously rearrange everything five minutes before a client presentation.
Who is behind TidyNav?+−
Hey, I’m John Ludena—a designer and web developer based in Texas.
I’ve spent more than ten years building websites for creative agencies using WordPress, Drupal, Squarespace, Webflow, and whatever other platform the project decided to throw at me.
After rebuilding the same navigation patterns more times than any reasonable person should, I started making tools that remove some of the repetitive work designers and developers deal with every day.
When I’m not working on TidyNav, I’m usually riding my bike beneath the unforgiving Texas sun, drinking an unnecessarily small cortado, or spending time with friends and family.
Never struggle with Webflow navbars again.
Free templates, one embed, and your navbar is production-ready before your coffee's done.