Website menu design mistakes (and how to avoid them)

You have successfully lead a customer to your website, you even managed to catch his attention. The next thing to do is to properly handle the experience he will have while browsing your site and make sure to move him towards the end of your sales funnel. Navigation, or how people often call it ‘site menu’ is a huge part of it. Good navigation design ensures that people discover the right information in the right order fast and easy.

But what does it really mean to have a good navigation design? When it comes to the website menu, the design is by far not the only thing you should think of. Everyone can create a website menu design these days, but not everyone will pay attention to the structure, keywords, usability, and so on. As you are here and reading this post – apparently you do!

In the next few minutes, we will learn the best practices and common mistakes people make while creating their website menus.

Number of sections in your menu

We are not robots (at least not yet) so there is a tangible amount of information we are able to handle. The easiest way to test it is to open a random book and try to name random words one by one. As you can guess, the same principle applies to the site menu. Visitors don’t spend much time remembering all the sections you have on your site menu. We simply scan the content in order to find a keyword that is in our interest. The more sections you have, the more you risk of your website visitors not being able to aggregate site menu at once and lead to a higher exit rate.

There is multiple research done in the field and most of them come to the single conclusion – your website menu should be limited to the seven sections at most. The number that is an average of how many sections a regular visitor can remember and operate at once.

Your website menu should be limited to the seven sections at most. #webdesign #usability #webdevelopment Click To Tweet

I know what you are thinking – what about those huge product catalogs of Amazon and other e-commerce sites. Look once again, Amazon or eBay are categorizing their menus and catalogs to fit the golden ratio as much as they can. And if they are able to do so with their stocks, this gives a hope for the rest of us as well.

Site navigation example of eBay
Site navigation example of eBay

Submenu kills the main menu

One of the best ways to expand your menu is to use submenu, also called second level menu, which is uncovered upon hover or click. Submenu helps us to group products and services into logical groups, or set priorities.

The downside of a submenu is that it will reduce the number of clicks for the main menu that contains a submenu. Visitors will automatically skip the main menu and stick to the submenu. Regular visitor thinks that main menu, in this case, is used for descriptive or grouping purposes only.

Submenu example of Barneys with 3 level navigation
Submenu example of Barneys with 3 level navigation

In other words, if you decide to go with the submenu, expect to receive fewer clicks on the sections that have a submenu and probably place all relevant and important information into subsections.

Be descriptive, but short

Your site menu titles should be short enough for easy reading and understanding. We don’t want to see something like ‘Services we provide to the customers’ in the menu. So most of us stick to the simple ‘Services’, ‘History’, and other similar titles.

In general, we can easily guess the content, even Google and other search engines can make a guess. Yet, we want our customers (and search engines) not to make a guess, but instantly understand it. Simple updates here to add meaning are able to create a significant difference in SEO ranking over time.

Let’s imagine that you are running a web design company and have a section of the website called ‘Services’. To get a higher SEO ranking for your services, you can try to rename the section to ‘Web Design Services’. This gives more meaning to both, your website visitors and search engines upon indexing your site.

An order is important, the focus is king

We read from left to right (or from right to left), and this is why it is obvious to push most important information first. Keep this in mind when building a structure of your site navigation. The first sections your visitors will see should probably be the most important ones you want your potential customers to click.

Such a technique may decrease the time spent on the homepage but eventually will convert into higher goal completion.

Another technique to raise awareness is to create an additional focus for specific sections. You may have seen sites that sell online products with the ‘Purchase Now’ button in the menu which is styled differently. This is done on purpose in order to focus your attention and push you towards clicking it. The easiest way to create a similar layout in WordPress is to combine menu with the button by placing a button on the left or right from your menu into a separate column or Widgetized area of your theme header.

Visual Composer website menu with focus on Purchase button
Visual Composer website menu with a focus on Purchase button

Mobile menu and web menu

I am a big fan of a sandwich menu and my heart bleeds as I am writing this. Sandwich menu is an awesome feature for mobile versions of our website and a complete disaster for a desktop. Recent research done by Google experts uncovered the fact that a sandwich menu on desktop receives 30% fewer clicks than a regular menu, and the drop-off percentage of users is frightening.

Sandwich menu on desktop devices receives 30% fewer clicks and significantly increase drop-off rate. #ecommerce #seo #webdevelopment #webdesign Click To Tweet

How come that so trendy technology that supposes to ease our interface creates such a harm? The reason for designers to use a sandwich menu for mobile devices is powered by fact that mobile device screens are limited in their sizes, we simply can’t fit all sections into a single row on a regular phone. Sandwich menu allows us to group the navigation and reveal it upon request.

Sandwich menu example from Awwwards
Sandwich menu example from Awwwards

As you can guess, on a regular desktop computer there is no problem with the screen width. We are able to create a text menu that is always visible to our visitors without fears. Visitors are able to instantly see all the sections without a single click while sandwich still requires for the user to take an action.

With these things in mind, a good navigation design should be adapted for different devices. This means that the menu should change the look depending what device is in use, on the desktop we can display a regular text menu, while on the mobile devices this menu can be automatically converted into a sandwich menu.

Google Analytics and funnels

Rome wasn’t built in a day, so does website menu. Once you have your menu in place, it is a good idea to start analyzing the behavior of your visitors to see where you can improve.
Your main goal of the site is to lead customers down to your goal through the funnel. The goal can be anything, a purchase, subscription, visiting the specific article, you name it. Whatever your goal is, site menu is one of the main tools you will use to lead your visitors.

Google Analytics is a must-have tool in your daily arsenal if you want to succeed online. Most of the business owners often check their visitor’s rate and popular content data. Nevertheless, the true power of GA in terms of site navigation comes into play once you set up specific Events that need to be tracked down.

Google Tag Manager is a free tool you can use to create events and triggers on your site for Google Analytics being able to aggregate this data. All you have to do is simply add events for your navigation clicks. Within just a few days, you will be able to instantly see how your site menu works from page to page.

Google Tag Manager allows defining triggers and tags for your website actions
Google Tag Manager allows defining triggers and tags for your website actions

Combine this Event analysis with your Google Analytics Goals and Voilà, you will have a complete picture of your navigation successes and fails.

Create your website menu

There are several places where we usually place our website menus – header, footer, and sidebar. Each place is unique and serves different reasons. In Visual Composer, there are various menu design elements that you can download and add to your site layout with a simple drag and drop.

Website menu created with Visual Composer Website Builder for WordPress
Website menu created with Visual Composer Website Builder for WordPress

Add a regular text or sandwich menu at the top, display your product catalog in the sidebar or create a sitemap at the bottom of the page. You can also use your imagination to incorporate navigation anywhere on the site. Visual Composer can handle all design process for you, and you will be left with just aligning your structure and ensure other tips we discussed above.

More on wpcrib


  1. Can I hardcode my own template?

    I need something like this:

    1. With Visual Composer, you can save any layout as a template so you can use it later on. Simply click on the Template icon in the navigation bar once your layout is ready, give it a name you want and save – it will appear along with the other templates (including Visual Composer Hub templates which are available for Premium license owners).

Add comment

Join discussion and make an impact. Your email address will not be published.

GDPR is going into effect on May 25, 2018. Learn more in our new GDPR section. You can also view changes to our Privacy Policy.
We use cookies to provide a personalised experience for our users.