Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.

Register Here

Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.
Register Here
The Ultimate Inbound Marketing Strategy Playbook 2022

Take your inbound strategy to the next level

  • Master the 7 principles of highly effective inbound marketing
  • Dramatically improve your inbound sales
  • Get more buy-in at your company

How Creating a Lean Navbar Can Help Increase Your Website Conversions

By Christine Austin

How Creating a Lean Navbar Can Help Increase Your Website Conversions


If you walk into a mall for the first time, chances are you probably won't know where you’re going and will need to look at a directory.

That directory is what helps you navigate through the building. Without it, or with a poorly made one, you’d probably get lost.

Your website’s navigation acts the same as a directory. Your users need it to get from point A to B on your site.

 Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.

 If its outline is too confusing and users can’t figure out where to go, they may struggle to find some of the most important pages of your website.

To help create the most efficient navigation for conversion and better direct users where to go, here are 5 characteristics you can implement right now..

1. Streamline the Content

The purpose of the navigation bar is to provide users with clear, concise choices of where they can visit. With that in mind, the labeling you choose for your navbar should not be unnecessarily long or overwhelming.

Keep the amount of items on the navigation around four to seven. Any more will look crowded and dilute the chances of users landing on the pages you want them on.

A higher amount also tends to cause layout issues on different viewport sizes, causing your developers to create unnecessary workarounds for odd size screens.  

The content itself should also be simplified to something that’s clear and concise. You don’t want to confuse your users with lengthy, complex labels that they may not understand.

MindBody’s does an excellent job implementing this in their navigation seen below.


Rather than saying “Take a Tour” or “View Our Pricing”, they cut out unnecessary adjectives and use understandable labels so users will know exactly where they are going and what they will get before going there. This also makes the labels all around easier and quicker to digest, so they don’t need to think twice about what to do.

2. Organize in Terms of Hierarchy

As nice as alphabetical order might seem, this is not when you should use it.

You also can’t put the “Buy Now” button first just because that’s where you want users to go. You need to properly organize your navigation items so their order flows best with user behavior.

Traditionally, it's best to put the ‘home’ item first.

If you choose to remove it and instead use the logo as a way to link back home, then try putting an ‘about’ item first, followed by some links related to the product pages.

Any consultation, login, or signup buttons are ordered last, but should also be the most eye-catching since their traditionally the most important pages and where you want the user to eventually end up.

Github does an excellent job creating a nicely organized navigation with buttons linking to where users can sign up or sign in.


If you have a lengthier navigation, you can also try putting your actionable items in a much smaller navbar above the main nav. This will allow you to include them without worrying about overcrowding your main navbar. 

3. Put it in an Obvious Area

When users arrive on your site, they expect the navbar to either be horizontally aligned to the top of the window, or vertically aligned to the left or right. There shouldn't be anything that takes priority over your navigation so that it needs to be moved somewhere else.

Keep its location standard and consistent throughout your website. That way users know exactly where to go to find what they need next. This will automatically keep bounce rates low and facilitate proper user flow through your website.

The majority of websites keep their navigation on the top of the page, but maybe you want to be a bit more daring with yours. If so, take a look at Sprint’s website who chose to go with a left justified navigation with icons to draw attention to it.


4. Avoid Drop-Down Menus

I get it. You have a lot of pages on your website and you’d like people to get through as many of them as possible, but throwing them into a huge drop-down menu isn't the answer.

There are a couple issues drop-down menus create.

First off, if your drop-down only activates on hover, people on tablet and mobile devices will not be able to navigate them unless you create some type of fallback. It’s also been shown that users consider drop-down menus just plain annoying since they demand more time from users to think about where they want to go.

Of course, if you are a ecommerce website, a drop-down menu is your best friend. So if you fit into the group of people who desperately need one, Sony is a prime example of the best way to layout a drop-down menu.


Sony breaks down their products into different categories so users can immediately search by product type rather than visiting the online store then having to pick what product they may want. They even insert images of the products into the navigation so you get an idea of where that menu item links to before even looking at the words below it.

5. Make it Responsive

Now that you know how to layout and design your navigation, it’s time to start thinking about how it will work responsively.

Obviously, your horizontal navbar won’t work on a tablet or mobile phone. Instead you need to condense it. Fortunately, there are several effective ways you can layout your mobile menu depending on how your desktop menu functions.

Most everyone uses the ‘hamburger’ icon which is placed in a similar area where the desktop navigation was. When clicked, your menus functionality may vary depending on what is best for your site. If you have a one-level navigation, you could just do a singular drop down menu similar to what Microsoft has (minus the multi-level nav they have).


If you aren't a fan of that user interface, you could also do a full screen slide/fade-in navigation like Digital Telepathy has.


If you’re someone who has a multi-level navigation, try checking out one of our clients, Accelerence, who have a slide-in nav with everything ordered the same as their desktop nav.


This method can also be used for websites with one-level navigation if you prefer, but this layout’s usability is the most optimal out of the three for dropdown navigations.

If you aren’t sure which method works best for you, remember, A/B testing is your best friend and can be utilized here to figure out what option works best for your users.

Join the IMPACT coaches for a deep dive on a new topic every month in our free virtual event series.


Web Design
Marketing Strategy
Published on May 19, 2015

Recent Articles

8 of the Best Business Website Designs to Inspire You in 2023
November 17, 2022 • 7 min read
Take It From an Expert: You Probably Don’t Need a New Website
November 16, 2022 • 4 min read
What Does a Great Inbound Marketing Website Look Like in 2023?
November 14, 2022 • 12 min read
4 Ways To Recession-proof Your Website In 2022
June 9, 2022 • 5 min read
23 of the Best Examples of Business Blog Design
May 30, 2022 • 13 min read
5 Prep Secrets for a Smoother, More Successful Website Project Plan (+ Infographic)
May 16, 2022 • 8 min read
8 Best Content Management Systems for Digital Marketing in 2022
March 22, 2022 • 9 min read
How Much Does a Website Design or Redesign Cost in 2022?
March 8, 2022 • 9 min read
Website Redesign Checklist: The 12 Crucial Steps You Need To Be Successful
February 22, 2022 • 17 min read
Your 2022 Website Strategy Must Include These 6 Things
February 15, 2022 • 9 min read
11 Pricing Page Examples for Business Websites (Updated for 2022)
January 18, 2022 • 10 min read
8 Crucial Elements Every Homepage Design Should Have [+Video]
January 15, 2022 • 6 min read
What Makes a Good Website Design? 7 Award-Winning Examples To Be Inspired By
December 18, 2021 • 9 min read
What Is a Learning Center and Why Does My Website Need One?
November 22, 2021 • 6 min read
7 Self-Service Tools on Business Websites to be Inspired By
September 29, 2021 • 7 min read
Google Shares New Tools to Audit Website User Experience
August 12, 2021 • 3 min read
New HubSpot CMS Hub Starter Tier Released for Growing Businesses
August 6, 2021 • 4 min read
Too many internal links in content can confuse Google about site structure
July 9, 2021 • 5 min read
Google July 2021 core update rolling out over next 2 weeks
July 2, 2021 • 4 min read
6 tips for building a great diversity and inclusion page (+examples)
June 29, 2021 • 7 min read
Google punts third-party cookie ban to 2023 for 'responsible planning'
June 25, 2021 • 6 min read
8 types of website performance metrics you should look at on a monthly basis
June 24, 2021 • 11 min read
Finally, Google page experience core update is rolling out
June 18, 2021 • 3 min read
8 Business Blog Design Examples That Keep Readers Engaged
June 16, 2021 • 6 min read
5 ways you can use the StoryBrand framework to make a better website
June 14, 2021 • 5 min read