Hey! Free yourself to discover the 'magic' trick that will propel your business on the Web

How to add a navigation menu on Webflow?

Web Design,Freelance,Business
Webflow navigation menu
Photo by Sharon McCutcheon on Unsplash

Almost all websites have a navigation menu. Very practical, it allows the users to navigate on your site (as its name shows). But the real question is: how to add a navigation menu on Webflow?

3 steps to create a navigation menu on Webflow

Adding a navigation menu on Webflow is done in only 3 steps:

  • You have to click on the "+" button on the left side (in the sidebar).
  • In this bar, look for the tab: components.
  • Under this tab, you click on "navigation menu". It will be immediately functional on different screen versions (smartphone, tablet and desktop).

And there you have it, a navigation menu! All you have to do now is customize it according to the design of the site (the logo or image to insert, the background color, the texts, etc.). To do this, you go to the right sidebar. I already explained it in another of my articles on CSS: this bar is dedicated to CSS (color, text size, typography and many others).

Each page of your menu will still need to be customized. Don't be discouraged, this step won't take much time. I'll show you a technique to do it quickly: give them a class. All elements belonging to this class will be automatically modified when you modify this class itself (instead of doing it one by one).

There is a YouTube video in which I describe this at the bottom of the article. Support me by subscribing to the YouTube channel "Happy Desk Design".

Webflow navigation menu
Photo by Greyson Joralemon on Unsplash

Only, is the creation of a menu mandatory?

The advantages of a navigation menu?

Nowadays, setting up a navigation menu should no longer be an option, but a necessity. It has become a standard in web practices. A navigation menu has a very specific role: thanks to it, a user can easily orientate himself, move around and find his way on your site.

In general, these menus are placed at the top of the pages. This position promises to save a lot of space, that's why in my example, I decided to show you how to add a navigation menu on Webflow at the top of the page. If you want more details (a vertical menu, for example), I suggest you to follow a complete Webflow training:)

In any case, a horizontal menu fits better with a more modern and trendy design. It also reassures Internet users, as it preserves their browsing habits.

On the other hand, for website owners, a navigation menu on Webflow at the top of the page helps them to highlight their products, services... They are immediately visible, even at first glance.

Webflow navigation menu
Photo by Denise Chan on Unsplash

Additional tips

If you choose horizontal navigation menus, make sure that the number of items they contain is reasonable. In general, 8 items are the maximum. Otherwise, the design may be compromised (and the visibility of the pages).

Above all, a menu (whatever its type) must be consistent with the rest of the graphic charter of a website. Besides, isn't this the real role of a webdesigner?

Webflow navigation menu
Photo by Robert Katzki on Unsplash

In short, I have only given you the basics of creating navigation menus on Webflow. However, I invite you to follow my training for more detailed learning about menus on Webflow :)

YouTube: Webflow Navigation Menu

Come back to this page whenever you want. Did you find any ideas that I forgot? If so, what are they? Leave a comment below or send an email to hello@happydesk.be
Kevin Palombo, Manager of Happydesk
Make the counter explode to reach 1M subscribers together (Pssst...it's in real time)
Together it's more fun

1 Million with you.

It's really amazing how our YouTube community can be a true source of inspiration for all of us. So if you're looking for a community that will give you a boost to reach your personal and business goals, you've come to the right place!
Certified 100%
ULTRA enriching and hair-raising!
Receive a mountain of gifts


We all keep our childish soul, so we like to receive lots of gifts, a montaaaagne of gifts, a galaxiiiiiie of gifts, a.... YOUHOU, are you still with us? Since you also love gifts, receive in your mailbox energy, strategies and tools (each one more grandiose than the other) that will generate results in your business.


Clearsome time for Thursday because an intergalactic surprise awaits you.
Propel your life & your business in 30 days!


The only one, the only one, the real one where all ideas can germinate, develop and succeed. Each phase of business development is thought out down to the smallest detail (even the smallest) to accompany you in your project.

Foundations, development, support, mutual aid, coaching, website, web tools and even cookies. Joining the Happy.webacademy is to be part of this ecosystem without risk, just jump in and let yourself be guided.
AI enabled to accelerate your transformation 🤖
12 Up-to-date modules
We give you crazy training with action plans, regular updates, access for life, and 24/7 support, 365 days a year. Everything you need (and more) to make your life, your business and your skills shine.
Your thruster
We make sure that you are always on top of your questions and that you can grow with a community that has the same dreams as you, and that you can meet super inspiring people.
Never again alone
Your Website!
Who better than Web experts to create a turnkey Website and sell your offers quickly without having to break your head with the technique. No more sleepless nights tearing your hair out, we've got you covered to accelerate your online growth!
We will create you
an Asteroid
12 months Free
We answer all your business, mindset and nugget questions. It's also the best way to get your daily dose of motivation, anything is possible!
Don't forget to bring
Strategy 3.0
The Web and e-commerce are evolving at an incredible speed, and if you don't keep up, you'll lose money. That's why we're going to share with you all our latest tips, discoveries and innovations (automation, artificial intelligence,...) so that you and your business stay on top!
2 Business Coaches
Kevin & Sophie, 2 coaches in the field for 10 years who will be there to motivate you, boost your mindset, and much more! Throughout your entrepreneurial adventure on the Web & in e-commerce, we will support you to validate opportunities or help you optimize your performance. You will NEVER be alone again!
Continuous monitoring
It's sometimes hard to take a step back from your work when you're just starting out (even after), which is why we'll always be there to review your work privately BEFORE you spend any money on advertising or influencers.
Creating a profitable business requires financial optimization. That's why we'll give you the tips we use so you can learn how to invest the money you'll earn in the long run to create wealth.