Website Navigation: 7 Best Practices, Design Tips and Warnings

Share This
Andy Crestodina

Little things make a big difference. Your website navigation is a great example. The structure and labels of your navigation can have a huge impact on results. Here’s why:

  • Navigation affects traffic: how high you’ll rank, how much traffic you’ll get from search
  • Navigation affects conversions: how easy the site is to use, what percentage of visitors convert into leads and customers

Here is a video and checklist for website navigation best practices. These are design ideas and tips along with examples of what to do (and what not to do) with your website’s menu.

1. Be descriptive

“What we do” doesn’t actually say what you do. Neither does “Products,” “Services” or “Solutions.” Descriptive navigation that uses keyphrases is better for two reasons. Here’s where SEO and conversions come in.

  • Descriptive labels in your navigation are good for search engines
    The navigation bar is a key place to indicate relevance to search engines. Since your navigation appears on every page, the descriptive label shows Google that you are truly about that topic.
  • Descriptive labels in your navigation are good for visitors
    Your navigation bar is visually prominent, so it communicates instantly. When it lists your main products or services, it will be obvious, at a glance, what your company does up front, so they’ll know they’re in the right place.

Use your main navigation as a place to start telling people and search engines about what you do. Use labels that use top-of-mind phrases for visitors and popular keyphrases.

Warning! Avoid labels such as “services” and “solutions.”

If you have one page listing all of your services, it will never rank. That’s because it’s not focusing on one topic. Every page on your website has a chance of ranking, as long as it’s focused on a topic, on a keyphrase.

No one is searching for “products” or “services,” so these labels don’t help your rankings.

This is why your website architecture, not just the navigation, is key for SEO. A search optimized website has a page for each service, each product, each team member and topic. Avoid making a “services” page unless it links to other, search optimized pages for each service.

For more info, read how to make a sitemap.

2. Avoid format-based navigation

Navigation labels such as “videos,” “photos” and “white papers” tell visitors the format of the content, but not the topic. People don’t go to websites looking for videos or whitepapers. They visit websites looking for answers and information.

Labels indicating the format aren’t descriptive and therefore, not very helpful to visitors. That’s why Aurora Bedford from the Nielsen Norman Group recommends against using format-based navigation.

Users interested in a specific topic usually don’t care in what format the information will be delivered to them; they are focused solely on finding answers that will address the question they had in mind.” – Aurora Bedford, User Experience Specialist, Nielsen Norman Group

3. Avoid dropdown menus

Popular, yes. But not a good idea. Avoiding dropdown menus is good for two reasons:

  • Good for search engines: Drop down menus can be difficult for search engines to crawl. Depending on how they’re programmed, they may lead to problems.
  • Good for visitors: Usability studies show that dropdown menus are annoying. Here’s why: visitors move their eyes much faster than they move their mouse. When they move their mouse to a menu item, they’ve likely already decided to click… and then you gave them more options. It’s a hiccup in the mind of the visitor.

More importantly, dropdowns encourage visitors to skip important pages. If you’re using dropdowns, you can easily see this problem in your analytics.


But the research shows that one type of drop down menu performs well in usability studies: The “mega drop down.” These offer lots of options, making that moment of friction worth it.

If you have a big site with lots of pages and a very diverse set of products or services, a mega menu may be a good idea, despite the fact that they dramatically increase the number of links from your home page.

4. Limit the number of menu items to seven

Some websites have hundreds of links on the home page. That’s bad. Limiting the number of links in your main navigation is good for two reasons. These are the same two reasons to use descriptive labels:

  • Fewer items in your navigation are good for search engines
    Your homepage has the most “authority” with search engines because more sites link to your homepage than to your interior pages. This authority flows down to deeper pages through your navigation.

    If your homepage has tons of links, this dilutes the authority passed from it down to your interior pages. This reduces the likelihood that your interior pages will rank.

    The more concise your navigation, the more authority will flow to each interior page, making your interior pages more likely to rank.

    Read Internal Linking Best Practices for more details.

Example: If your homepage has an authority of 38 according to Open Site Explorer, then is has just this amount of authority to pass along to interior pages.


Suppose your navigation includes 50 items and combined with every other link and button on the page, your home page links to a total of 200 pages. This means the amount of authority passed from the homepage to each of those pages is divided by 200.

If you cut the number of links in half, you’ll double the amount of authority passed from the home page, and increase the chance that your interior pages will rank.


Tip! The “Link Calculator” counts the number of links on any page. It also estimates the increase in authority that would be passed if you reduce the number of links. It uses PageRank, not Domain Authority, but the concept is the same.

  • Fewer items in your navigation are good for visitors
    Short-term memory holds only seven items, plus or minus two. This is from the famous psychology paper published by George Miller in 1956.

    More recent research shows that although the brain uses “chunking” as a method to improve recall in short-term memory, the number depends on the category. It may be seven for numbers, but only five for words.

    Regardless, the more items in your navigation, the more difficult the information is to remember and process for your visitors. Visually, eight is a LOT more than seven. If you have too many, visitors’ eyes may scan past important items.

    If you need to use more than seven items, consider breaking them up into groups.

Warning! Avoid long lists.

Break out your navigation into groups of five to seven items.

Tip! Each time you remove a menu item (or any other element) from a page, everything left becomes more visually prominent and is more likely to be seen and considered.

It takes discipline to make the tough decisions. You can do it. Challenge yourself to trim it down to five!

5. The order of your website navigation is important

The number of items matters, but so does the order of those items.

In website navigation, just like any list, items at the beginning and the end are most effective, because this is where attention and retention are highest. It’s called the serial position effect, and it combines to cognitive biases:

  • Primacy effect: Items at the beginning of a list are more easily remembered.
  • Recency effect: Items at the end of a list (or things that just happened) are more easily remembered.

For this reason, anything we put at the beginning or end of our navigation becomes more prominent. We should put those items that are most important to our business and our visitors in these places.

Always seek to put the things that are most important to visitors in the most visually prominent places. This aligns with the core principal of web design and content marketing:

First give visitors what they want, then they might give you what you want.

So put the most popular, important items at the beginning of the navigation. Not sure what those are? Just look at your Analytics. Speaking of Analytics, let’s move on to our final tip.

6. How to optimize your website’s navigation

Designing your navigation is the beginning, not the end. Digital ink is never dry. A few weeks after creating your navigation, you can use Analytics to look back and do a bit of evaluation.

There are two reports that will show you which navigation items are most used by your visitors. One is the “navigation summary” or “in-page” view in the Behavior report. The others are the Behavior Flow / User Flow reports.

In-page Analytics shows little orange boxes next to each of your navigation items, indicating what percentage of visitors went to each page from any page. It’s inaccurate and misleading for several reasons. It’s also a little buggy.

If this report doesn’t work for you, you can review the “navigation summary” from your home page. The list of pages and percentage pageviews for each will give you a good sense of what’s working in your menu.


Another view into what people are clicking is in your Behavior > Behavior Flow report. This report is identical to the Audience > Users Flow report. These reports are identical unless you are tracking events. Event tracking is added to the Behavior Flow report data.

In either case, the report will look something like this:


Tip! For more insights into how to use the User Flow report, read top paths through your website.

These reports are all ways to get ideas about which navigation items visitors are using and which ones they’re not, making optimization possible.

Here are some examples of decisions you might make based on your analysis from these reports.

  • Remove items that rarely get clicked, if they aren’t critical
  • Rename or relabel that rarely get clicked, if they are important
  • Move items that often get clicked to the beginning

Warning! Keep in mind that your home page may not be the entry point for many visitors. A search optimized website has many entry points. Many (or even most) visitors won’t start from the home page.

7. Website navigation on mobile devices

Responsive web design has brought with it mobile navigation best practices and standards. It can be summed up in two words: “hamburger icon.”

It’s an icon made up of three short horizontal lines, representing a menu. But it looks a bit like a sandwich, so people call it the hamburger icon. It appears in the top right of mobile websites and clicking it reveals the navigation menu.

Here are a few examples of mobile navigation examples.


Although this has become a dominant standard, adding the word “menu” may help visitors find this type of “hidden” navigation. The Nielsen Norman Group warns that hidden navigation increases task completion time for visitors.

ProTip! For mobile visitors, make sure that the phone number turns into a button that dials the number when tapped. It’s a simple matter of adding tel: to the href code for the phone number for the mobile version of your site. The code should look something like this:

<a href=”tel:773-348-4581″>(773)348.4581</a>

A good website makes your phone ring.

For more ideas on mobile navigation and buttons, read how to design a button.

Charting (and changing) your course

We hope these tips gave you new ideas and inspiration for your menus. Ideally, you can implement your ideas quickly in your content management system. A good site is flexible, letting you adjust the labels and order of your menus.

There are exceptions to every rule. Not sure if you should make a change? Ask an expert web strategist to review your Analytics with you.

Make your navigation work well for both human visitors and search engine robots. Your Analytics will thank you for it!

Any other ideas or questions? What about the “home” button? Is it necessary? Do you put your phone number in your header? Add your comment below.

Share This

What are your thoughts?

By signing up you agree to our Privacy Policy.

Comments (30)
  • I never noticed how annoyed I was viewing those drop-down menus until you pointed it out! Very nice post.

  • I would really like to know why you do not mention anything about the Order of the links. Although I agree that the order of navigation is important, I don’t agree with why. I can surpass your serial position effect with larger, well designed links for the most frequently used or the links I want my visitors to see or use first. When I view a list of links, I look to search them alphabetically (unless one stands out by color or size). Neither the first nor the last entry stand out. And the longer the link list, the more I expect it to be in alphabetical order. But I do not see ANYONE making that point (probably because it is so obvious). But it needs to be said for those who do not know or refuted with an explanation of why alphabetical order is not important. This is true whether a pop down menu or a list of links to one side of the page. So what is the industry standard regarding [alphabetical] link order?

  • What is your thought on having navigation links that then bring you to another site? For example, my organization has an annual event and we have a separate site just for that event. Should our organizational site have a nav link to a page about the event, that then links to that other site, or directly to that other site? We are having internal disagreements about this. Thanks!!!

  • I am confused about the website navigation bar location. Would it be ok to have navigation in the website sidebar? Because my website has more categories. It is not possible to keep everyone in the top.

  • Hi Andy! I’m creating my first ever website (for a blog) and came across this article during a Google search of “website navigation best practices.” It’s full of so many gems and ideas I would have never thought of that I added this to my calendar to re-read on a monthly basis. Thank you for sharing your insights!

  • Hi Andy. Useful information but you may wish to update the link juice calculator section as that that tool no longer exists on the link you shared. If you know of an altlernative I’d love to hear it. Thanks.

  • Hello,i have a question,if i do not use dropdown menu,only category,how can i let the visitors find the sub links under the category quickly ? because i do ot have sidebar for the pages. thanks

  • Hello, searching for an answer to a clients question on sub menus has brought me to a few websites like this. They all say, drop down menus are bad, then go on to say only have a few top level menu items. So how do you accomplish this with that contradiction?

    It’s not that I don’t understand the gist of both statements, but no one gives the solution.

  • I thought this was a fantastic post. Thanks so much for sharing this with the world.

  • Great Post here Sir. Thank you!

  • Great read and solid advice throughout.

    Question: When it comes to listing Products in a mega dropdown, do you have any thoughts on listing product offerings by Manufacturer as well as Use Case (eg. Residential/Office/Commercial)? Any SEO pitfalls or caveats to this organizational approach?

  • A client has a production co. with two events on their site, and each event has its own off-site ticket page. They want to include a “TICKETS” link in the top main menu with a drop-down that has the links to each of the off-site pages. My rule is to never link off your site in the main menu. Your thoughts?

  • Andy, this is another article that is extremely helpful. Thanks!

    However, it appears from the comments that this originally appeared 5 years ago. A lifetime in internet years. What has changed as far as best practices for 2017?

    • I believe this is a great site, you are working great on the content and quality of this site at the same time.

  • After reading these tips, please take notice of the menu structure on this very page breaking the rules defined in the article.

  • Hi, what would you suggest instead of “Services” in the nav if a company has too many services for each to be a nav item but not enough services to have a mega drop down menu?

  • It’s time to kill the 7 plus/minus 2 urban myth for menus. It applies when trying to recall the items, not when they’re visually in front of them as they are in a menu.

  • Very helpful, thank you for this article

  • Really liked the article. One thing on examination: The drop down menu study cited was primarily focusing on drop downs for adding information – not drop down menus in general. Drop down menus may be annoying but if designed with the other best practices you mention, my bet is that feature will be the least of the issues. Mega-menus are equally annoying when they overwhelm the viewer with too many options.

  • Very useful guide. And #3—Foghorns Leghorns in the dropdown—Ha! You have a knack for making learning humorous and entertaining. Thank you.

    • It’s fun that you caught that. That was an 80’s cartoon reference for our Gen X readers!

  • Thank you for the pointers. Better designs are like simple gear shift patterns. Working sites that deliver quick, easy, fully. Yeah. Do that.

  • I was in such a hurry to edit my site nav that I forgot to thank you for this wonderful post :p

    And to answer your question, I put my email with (at) instead of @ at the top of the sidebar – no number, though, since I don’t see my target audience communicating with me across continents!

    Thanks again.

  • Hey Andy!
    Thanks for sharing such a great content about designing a site. I’ve some other problem,can you suggest some seo and design service which you highly recommend or do you offer this services??

    • We offer web design services, but we don’t do SEO as a separate, service. It’s really build in to our design process. But there are thousands of SEO companies. If you can, I recommend finding someone local that you can meet with regularly.

  • If you can’t identify the seven most important things to put on your menu, without drop-downs and with concise yet informative descriptions, you probably haven’t put enough thought into what your website is about.

    (And my hand’s up higher than Arnold Horshack on that one. Guilty!)

  • Hi Andy!

    I have a question about two different options for navigation, and I’ll use a ‘Services’ link as an example –

    1. Services is listed on the navigation menu and when it’s clicked a dropdown menu appears with a list of 8 services. Each service brings you to it’s own page.

    2. Services is listed on the navigation menu and it leads directly to a page called Services which then includes 8 links to 8 separate pages about those services.

    Is one of these options better for SEO? I like option 2 better, but I was told that the more information is in the navigation bar, the better.


    • I would generally prefer option two, since it’s a better way to guide visitors through the site. But if you have a lot of options (10+) the “mega dropdown” might be a good choice.

      And I would look for any label other than “services.” Try to be descriptive! It’s better SEO and better UX…

  • I think it always will be between the minimalism, the user needs, a false UX and our appetency to show more.
    Thank you very much. I have 10+ years of the marketing experience but your articles is very useful for me,

  • Great piece, Andy! I’ve been working in SEO for years and I still learn something new from each of your articles. Thanks for the intro to the Link Juice Test.

Join over 16,000 people who receive web marketing tips every two weeks.

By signing up you agree to our Privacy Policy.

Share This