We’re happy to announce our latest addition to the Webflow family of UI components: the Navbar. Our initial release of the navbar will focus on core functionality and navigation between pages. Future releases will add extra features, so please let us know what you’d like to see!
Simply drag a navbar from the library and drop it into your site.
With a navbar in place, you’ll see a default set of elements including an (optional) container element to ensure your nav elements align with your site’s other container-based content.
Here is the navbar structure as it appears in the webflow navigator. You can rearrange your layout here (e.g. if you prefer a navbar without a container).
Change the navbar to the
open state using the
Open Menu button, found in the settings panel.
Once the menu is open, you can style the Menu Button (aka ) along with its fancy new
Open state. Boom!
When you hook up the Nav Links to other pages in your site, the links will auto-select if you are currently on that page. This also means you can style them using the new
You can control when your navbar collapses across each media query, using the Menu icon slider found in the navbar settings. Note: It’s wise to set this in the beginning and leave it. Switching this setting after you have designed your navbar will result in styles looking out-of-place.
More on the way!
We’ve got some cool extras planned for the navbar that didn’t quite make the initial release.
- Auto-hide + show on scroll (similar to headroom.js)
- Sticky position that attaches to viewport on scroll
- Select current Nav Link based on #anchor id
As always, your feedback is essential. Please let us know how we can make the Navbar better!