The navigation menu is one of the most important elements of your entire website.
Without it, your visitors would be lost from the moment they arrive at your home page. Traffic would suffer, conversion rates would drop, and you could lose a significant chunk of online business.
But for your menu to do its job right, you need to think about it strategically. Which pages will you include and why? Where will it be on your page? How will it look on a mobile device?
If all of that seems overwhelming, don’t worry — we’re sharing our best tips for getting the most from your website menu below.
1. Choose the right pages
The most important decision you’ll ever make about your website navigation bar is which pages to include. Your main menu is your chance to tell visitors which parts of your site are the most important, impressive, and informative, so you need to approach this part of the web design process thoughtfully.
Try to limit the number of pages in your menu to 7, give or take 2. This prevents visitors from feeling overwhelmed by the number of options, keeps your design from looking too cluttered, and ensures that none of the important pages are overlooked.
If you’re not sure which pages are important to your visitors, take a look at your Google Analytics for the past year.
Which pages consistently see the most traffic? Which ones don’t see as much traffic as you thought they would?
Use this information to narrow down your options to just the pages your visitors want to see.
2. Put them in the right order
Choosing which pages to include in your main navigation is just the first step of the streamlining process. With that list in hand, you’ll have to decide what order will bring in the best results.
To do that, consider the Serial Position Effect, which states that users are more likely to remember the first and last items in a series and are more likely to forget items in the middle.
That’s why most website navigation bar designs list the home page first and the contact page last — they’re two of the most important pages on your site, so they’re typically placed where viewers will be sure to see them.
For everything in the middle, you’ll need to rely on good old-fashioned data to help determine the best order. According to a 2015 Web Usability Report, 86% of people who visit your home page want to see information about your products and services next, 52% want to see your About page for company information, and 27% want to read your customers’ testimonials.
3. Make sure it’s responsive
Just because your menu looks great on the desktop version of your site doesn’t mean it’s perfect. If it’s not mobile-responsive, you still have some work to do — more than half of all website visits now come from people using smartphones, and they need to be able to find their way around your site even more quickly than the average desktop browser.
Remember that phone screens are smaller, so when it comes to mobile website navigation design, you’ll need to make every pixel count. To do this, most designers opt for the ubiquitous hamburger menu rather than a horizontal navigation bar we’re used to seeing on desktops.
To keep your hamburger menu clean and simple, limit how many drop-downs your menu includes. We usually suggest having only one level of drop-downs, though it’s even better if you can get by with none. You can also leave off the Home button and just link your logo to your home page — this has become a common enough practice that most of your users will expect it anyway.
You can also play around a bit with the design of your hamburger menu. Studies have found that menus get more clicks when they also have the word “Menu” underneath, as well as when they’re in a different color to stand out from the rest of your site. Don’t be afraid to run a few A/B tests to figure out what works best for your audience.
4. Don’t forget the footer
Finally, don’t underestimate the power of a good footer menu. This space at the bottom of your website is the ideal home for links that your visitors don’t need to access often but want to be able to find easily when they do need them.
Typically, footer menus include things like:
- Press center
- Customer support
- Newsletter and blog signups
Footer menus act as secondary navigation, and because they’re tucked out of the way at the very bottom of your site, they can afford to be a little more complex. Some companies even break their footer menus up into multiple columns organized by topic, like INC and Crazy Egg do: