Creating User Friendly Navigation Menus


Although I don't claim to be a designer myself, the world of web development goes hand in hand with that of design. One thing I appreciate as a developer (and an average internet user) is a friendly navigation menu. I think we can all agree that navigation is one of the most crucial aspects of a website. While each website will have differing needs in this area, there are some basic principles that can be applied to most to keep them user friendly.


Every site should have a clear site map. You should break down each section of the site, and determine what is most important and what is not. Then you can put the most important items in your primary navigation, and if you have the need, you can put the others in a secondary menu.

Keep It Consistent

Once you have your primary navigation down, keep it consistent internally throughout the site. Your user shouldn't have to search for a way to navigate, and they shouldn't have to relearn how on different areas of your site.

You should also consider some standard navigation practices. For example, a lot of websites have their logo link back to their homepage. Unless you have a good reason NOT to, I would advise doing this as a lot of users expect this type of functionality.

Let The User Know Where They Are

There are several ways to accomplish this. You can simply alter the text color of the current page, or provide an underline. A lot of sites will also alter the background color of the current page in the navigation. It can be as subtle or overstated as you like, but it should be included. That way the user will always know where they are on the site.

If your content is organized in a hierarchy then an additional way to accomplish this is by use of a breadcrumb menu. A breadcrumb menu is a type of secondary navigation that let's the user know where they are in the site.

Reference: Smashing Magazine

Consider A Sticky Menu

A sticky menu is sometimes referred to as a fixed menu. As you scroll down the page, it will "stick" to the top of the screen, allowing you to access it no matter where you are vertically on the page. While sticky menus can be cumbersome and/or annoying when used incorrectly, when they are used appropriately they can be really helpful. Next time you find yourself on Facebook or Google+, scroll down the page and take a look at the top menu. Just remember: this should be done with CSS and/or JavaScript unless you are from the mid 90's, then you can use frames.

Reference: Smashing Magazine


As I said, every website will have different needs when it comes to navigation. Not all of these may apply in your situation, but it can't hurt to consider them. What do you think? Do you have any other "must-haves" when it comes to navigation? Let me know in the comments section below.

If you liked this post, you might also enjoy 12 internal linking best practices

About the Author: Ryan Cowles

Ryan Cowles is a WordPress / Front End Developer living in Los Angeles, California. Along with a passion for building creative websites, he also enjoys photography, design, travel and the great outdoors. You can view his personal website by visiting To see what he has been up to lately, check out his blog at Metacom Creative.

Ryan S. Cowles

Additional Posts

10 Things We Didn’t Know A Week Ago [Week 08]

How To Track and Identify Your Social Media Wins

How To Add Rich Markup To A Page #microdata

Read previous post:
10 Things We Didn’t Know A Week Ago [Week 08]

1. Google's Ad Quality Team Stats Data Sets Range In The Billions...Read More...