Discover the best navbar websites created by professional designers. Get inspired and start planning your perfect navbar web design today!

Hey guys,

Here's the first pack of UI elements that I thought I'd share with the community.

Please Note: This project was made 2+ years ago, and doesn't meet our current quality standards. BUT hopefully, it can still help someone <3 
⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

⁃⁃⁃⁃⁃⁃⁃

✒️ Licence Notes:

⦿ Images available under CC0 (Unsplash, Pexels, Freepix or Similar)
⦿ Iconography available under CC0 (UpLabs, Flaticon, Noun Project)

Avo - Webflow UI Kit (Clone)

Avocado - Webflow UI Kit

Flowbase is the largest Webflow resource site for Webflow Experts and Beginners. Cloneable Assets, Templates, Guides, Videos & more.

⁃⁃⁃⁃⁃⁃⁃⁃

🥰 Support Us:

𝙄𝙛 𝙮𝙤𝙪 𝙚𝙣𝙟𝙤𝙮 𝙤𝙪𝙧 𝙘𝙤𝙣𝙩𝙚𝙣𝙩, 𝙥𝙡𝙚𝙖𝙨𝙚 𝙘𝙤𝙣𝙨𝙞𝙙𝙚𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩𝙞𝙣𝙜 𝙪𝙨 𝙤𝙣 𝙤𝙪𝙧 𝙨𝙤𝙘𝙞𝙖𝙡 𝙘𝙝𝙖𝙣𝙣𝙚𝙡𝙨. 𝙔𝙤𝙪𝙧 𝙨𝙪𝙥𝙥𝙤𝙧𝙩 𝙝𝙚𝙡𝙥𝙨 𝙪𝙨 𝙜𝙧𝙤𝙬 𝙩𝙝𝙧𝙤𝙪𝙜𝙝 𝙧𝙚𝙖𝙘𝙝𝙞𝙣𝙜 𝙛𝙪𝙧𝙩𝙝𝙚𝙧!

⦿ Website @ www.flowbase.co
⦿ Webflow @ www.webflow.com/flowbase
⦿ Twitter @ www.twitter.com/t_bekkers
⦿ Instagram @ www.instagram.com/flowbase.co

Flowbase | Webflow Assets & Tutorials

New cyberspace transmission detected. Please intercept and initiate visual scan...

The concept behind this website is that you 'Add to Cart' the different web elements you require to build your new website before checking out to open the contact form. No real products or transactions involved! The 3D images are modeled and rendered in Blender. Also includes a Sketchfab embed to view the 3D model. Thanks for looking! :-)

Web Elements

Web Elements 3D

Plan your voyage to Earth's moon, to Mars, Jupiter or Saturn!  

Original concept and design by Mike Delsing, brought to life on the web in Webflow by yours truly.

spaced

Spaced - To Space & Back — responsive, interactive website 🚀🌙🌎✨👾

Hey Webflow tribe ! 😁

We know you guys love clonable projects !

And we love them too ! 

What better way to learn and get inspired than by deconstructing existing projects, while saving tons of time and struggles.

And it’s because we got to learn sooo much with Webflow projects shared by awesome designers over the last few years that we decided to create our own Webflow UI Kit, to give you the opportunity to deconstruct and learn step-by-step how to use Webflow to create beautiful and interactive websites.

Hope you guys like it ! ;D

- - -

For more Webflow components & tutorials, visit our website :
=> www.nocodetribe.com

NoCodeTribe Webflow UI KIt

Webflow UI Kit - NoCodeTribe

I decided to recreate a nice looking full-screen navigation. This is not my design. Original source: http://publiclibrary.co.nz.

publiclibrary

Full-screen navigation

Info: I disabled the browser's default scroll bar on the desktop breakpoint using Custom CSS. 

You'll find the YouTube Tutorial here: https://youtu.be/l8cjr6lP9yk

Vertical Navbar with Progress Bar

Vertical Navbar for Scrollytelling One Pager with Progress Bar

A fancy full-screen Webflow navigation menu, which is completely responsive and can also be used from a desktop breakpoint.

The custom open and close animation with an animated background gradient gives the navigation menu an additional character of its own. 

Check out the tutorial here on my channel:
https://youtu.be/XiPq7BcyOPs

Responsive Fullscreen Webflow Navigation With Custom Animation

Responsive full-screen Webflow navigation menu

Rebuild of the https://k72.ca/en nav menu

This cloneable is for learning purposes only. I do not own the rights to this design and content.

K72 Menu

Intro animation based on the shot for Netguru by Pawel Kontek.
Visit Pawel's work here: bit.ly/2MZAfMW

Using the "damped sine wave" to accomplish the bouncy effect.

If you benefit from cloning the project, consider giving a Like ❤️ !

Netguru eBook

Intro Animation - Netguru eBook.

Custom animated hamburger menu concepts made 100% in Webflow using the navbar interaction. Please feel free to clone and use these on your own site.

Custom Animated Hamburger Menus in Webflow

Custom Hamburger Menus

💬  We are available for freelance work: info@studio99.design

Follow us on Twitter to get notified when we publish a new item:
https://twitter.com/_studio99

001 / Components / Navigation

🔸 001 / Comp. / Navigation

Played around with a full screen menu. Was also able to make it sort of responsive as it shifts to the right side on mobile.

Full screen Menu Navigation

Full Screen Menu Navigation

Designflow agency

This is our 2nd cloneable design! 🎉🚀 Use it for free and do whatever you want with it. 

Check it out: https://overlay-images-navigation.webflow.io/.
Overlay images animations can be a simple way to enhance your site experience through delightful interactions.

This template is made with: 
✔️ CMS Images 

Follow me for more Webflow freebies in the future 💙

Overlay Images Navigation

Overlay Images Navigation — Cloneable # 2

Playing around with Material Design navigation pieces.

Expanding Circle Navigation

Carousel slider with Swiper JS [Cloneable]

• Centered slide
• Active slide with a custom style (class: Swiper Slide Active)
• Infinite loop
• Navigation arrows
• Keyboard control
• Mousewheel control
• Custom swipe speed
• Full screen layout
• RWD

// Copy the code from Page Settings. //

Enjoy! ✌️

Created by Ficturo -> https://www.ficturo.com/

Swipeflow

Swipeflow・Swiper JS & Webflow Integration

I created a YouTube tutorial here (german): 
https://youtu.be/C1k6bm8ybBY

Nav Mega Dropdown

Navigation Mega Dropdown (+ custom animation)

In this cloneable, Lukas shows us how he shrinks a navigation in Webflow once it reaches a certain point while scrolling. In this case as soon as the next section arrives at the navigation. In addition, the design of the navigation changes from dark to light and the next section over scrolls the first. 
No custom code is needed for this. It is all solved directly with the Webflow interactions.

Tutorial: https://youtu.be/0ZkoNovZlFY