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

I rebuild Plink's website in Webflow because I really liked the interactions they have created. I thought it would be cool to learn how to create them in Webflow, and also to make it clonable for others to have a look at and learn how to create these interactions too.

Custom code was used, but there are just a few simple lines.

Plink's website for comparison: https://useplink.com/en/

--

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

--

• Do you need web design & development? Get in touch 👉 bjorn-encutescu.webflow.io/

• Follow my daily tips on Instagram 👉instagram.com/bjorn_encutescu/

Plink Webflow Rebuild

I'm excited to share this Stripe's Mega Menu rebuild in Webflow. I tried to make it many times but wasn't able to successfully achieve that in Webflow. But Alhamdulillah after 3-4 tries I was able to make It.

I tried to make it as structured as possible but if you have any questions about it do let me know in the comments or email me.

Note: 
- All the assets used in this project are property of Stripe and they have complete right over their use. I'm using it just for educational purposes.


Clone the Mega-menu to get started! 🚀
I encourage you to make it even better with your knowledge and expertise.

(Not responsive yet)

Stripe Mega Menu Rebuild

stripe-mega-menu-rebuild

Hey guys,
We experimented a bit by creating a custom navigation using Webflow's Interaction Panel and we are sharing the project with you.
Happy cloning! 🎉

Jolene Sante Portfolio

Jolene Portfolio / Custom Navigation

I'm excited to share a new tool for your Webflow design toolkit. It has many simple navigations and footers used more frequently.

Clone the kit to get started! 🚀

The kit includes
- 6 navigations
- 6 Footer Section (All responsive)

Cloneable-- Ui Kit

cloneableuikit

Demo: Official Webflow Mega Menu Navbar | Layout & Interactions

In this demo, you will find a clonable mockup of the navbar that Webflow uses for demonstrating the functions of the tool. 

My demonstration identifies:

‣ Good Layout principles using Flexbox & Divs.
‣ Controlled class naming for longterm flexibility.
‣ Uses of hover states & hover interactions.

Case Material: https://webflow.com/designer

Webflow Navbar | Mega Menu

Demo: Webflow Navbar

Watch the tutorial at https://www.youtube.com/watch?v=_ShTm4lK0Hc

Based on https://kirschberg.co.nz/

Liquid Nav Links

Hi my gorgeous friends of Webflow,

This project is a rebuilding from Webflow website, an amazing example of how you can responsively build a navbar and a mega-menu inside your project.

Enjoy and feel free to leave a comment!

Webflow Website Navbar and Mega Menu

This project will show you how to simply hide your navbar when scrolling down on a page and revealing it again while scrolling upward. You can see the scroll upward interaction uses a slight offset so it's not triggered without intention or by accident. 

You are welcome to clone this project and use it. It's a simple interaction but in my opinion a very useful one and feels a bit more high end. Great for having navigation on your website when you need it yet without it getting in the way.

Hide/Reveal Nav On Scroll

The project was made to help a forum question > https://forum.webflow.com/t/fixed-nav-bar-that-resizes-scrolling/78420

Navbar resize

Find more at The Quo Repo Project: 
https://www.figma.com/file/5myVJE4hFcq9ffQ2dqH3yV/The-Quo-UI-Repo-Project?node-id=4%3A347

–––
Created by Daniela and Nayeli at the Quo Repo Project.

–––
This navigation bar can get handy for websites requiring a mega menu for lots of links. It is responsive and can be edited in full using the "Editor" interface, for its mega menu items are being managed as symbols. On "Designer" mode you will notice the instructions to edit the content inside the drop-downs using the symbols (which basically consist of a suggestion to create a miscellanea page in which to drop these symbols, then edit the menu from there).

More on how to use it (including how to edit the mobile version): https://www.youtube.com/watch?v=3qSAAG8woYQ&t=31s

---------------------------

BBR Navbar

Cloneable mega menu navigation

This is a simple scroll interaction that gives the smoothness of a simple scrolling background change and removes nav links blurring while texts scrolls by underneath. 

Change background colour while scrolling...nav bar too :)

Simple background changing with matching nav bar.

Search Wrapper

Show search bar

CLONEABLE!!
================================================
About Us: We are a small team of Webflow Experts. We do White Label Webflow Development for Agencies and Small businesses. We help you balance your workload with our white-label Webflow development services. We provide, Project-based Development Services & Dedicated Developers - Hiring dedicated Webflow developers remotely can help your agency scale faster, and get the reliable capacity to always deliver on time.

Let us know if you are interested. You can reach us at webflow@figmatic.co
⦿ Website @ www.figmatic.co
⦿ Webflow @ https://webflow.com/figmaticllp
⦿ Twitter @ https://twitter.com/figmatic_llp
⦿ Instagram @ https://www.instagram.com/figmatic_llp/
⦿ Facebook @ https://www.facebook.com/Figmatic-LLP-101855852589790

Scrolls animation

scrolls-animation

A simple show and hide navbar. Feel free to clone this project. Happy Webflowing!!

Show & Hide Navbar on Scroll

A Simple Show Hide Navbar - Free to Clone

CLONEABLE COMPONENT!!
================================================
About Us:
We're Webflow Experts, We build anything you want in Webflow. We provide Webflow development services in six major categories.
1. Design to Webflow
2. Webflow Maintenance
3. Platform Migration
4. Custom Code and Integration
5. On-demand Developers
6. White-labelled Services

Let us know if you are interested. You can reach us at

webflow@figmatic.co

⦿ Website @ www.figmatic.co

⦿ Webflow @ https://webflow.com/figmaticllp

⦿ Twitter @ https://twitter.com/figmatic_llp

⦿ Instagram @ https://www.instagram.com/figmatic_llp/

⦿ Facebook @ https://www.facebook.com/Figmatic-LLP-101855852589790

Collapsible Nav

Expandable Menu

I built out a highlights page for each of the Scream movies! They are complete with a CMS holding the info for the various actors and details. Each page also has a unique navigation bar and animation. Have fun navigating through them all, hopefully it sparks some creativity in your next project! 

Check out my walk through design video of this as well: https://www.youtube.com/watch?v=LQuAHMm2WEQ

5 Unique Navbar Ideas | Scream Movies

A modern navigation bar styled with inspiration from glassmorphism. Animated to show and hide upon user scroll.

I'm available for hire: forsjonathan.com

Discover navbar interactions websites built by the Webflow community

Discover navbar interactions websites built by the Webflow community