Best Practices for Web Navigation Design

The navigation design of a website may not seem like a very important part, but it is actually one of the most important pieces of a website because it allows the user to easily get through to certain pages and navigate through the site. Chad Johnson states, “It is the portal to important content and can drastically increase (or decrease) site click-through”, in his article “Best Practices for Modern Website Navigation”. He also points out a few tips to help make your site’s navigation more user friendly. A few of these tips are to limit the number of top-level navigation items, keep dropdown menus to one level if possible, limit the height of the header, and to denote dropdowns with visual cues.

These are some really great tips for creating navigation menus, but it is also important to stay up to date on the current navigation trends. In the article, “3 Essential Navigation Trends for 2015,” Patrick McNeil shares a few trends that he says will dominate this year. The three trends that he discusses are the navicon, full screen navigation, and the perfection of the super-sized menu. The use of mega dropdown menus is nothing new, but the space inside of the menu is now being used for actually content and not just navigation lists. This content can be used to direct the user to the most important content.

Another thing that is really important when designing website navigation is to make it responsive for different size devices. The navicon is one thing that has been very helpful in doing this and has become the main go to system. Tim Cross discusses some ways to build a proper, responsive website, in his article “15 Best Practices for Responsible Responsive Web Design,” including a few navigation tips. For navigation, he suggests using hidden navigation menus that use a navicon to indicate where the menu is or horizontal swipeable menus that lets the content overflow off of the screen and cutting off part of the text to indicate that you can swipe to see more of the navigation. ESPN does a great job of using the hidden navigation menu with the navicon. Once you click the navicon there is a dropdown menu that pops out.


“Best Practices for Modern Website Navigation,” Duo Consulting,

“15 Best Practices for Responsible Responsive Web Design,” Income Diary,

“3 Essential Navigation Trends for 2015,” Web Designer Depot,