4 Classic Navigation Positions

What website navigation should you use?It doesn’t matter if you hand-code your websites or use a WYSIWYG visual editor, when you first decide to make a new website you have to think about its layout. Pretty much the standard on the Internet is to put the header (containing your company logo or website name) at the very top — so this decision is a no-brainer. The challenge is figuring out where the navigation will go.

In this post you’ll learn about the 4 “classic” navigation positions. But more than just seeing an example of each, you’ll learn about the pros and cons of each as well as how to match the navigation to your future website’s content.

#1 Top navigation

This position for the navigation (the orange stripe in the image below) works great for small personal and business websites. This style leaves the white content area below the navigation wide open for images and text. The downside is that if you are planning to have many pages on your site then you won’t have enough room on top. NOTE: There is a way to get around this by using “drop-down menus” as navigation. Unfortunately it’s a little hard to do if you’re just learning how to make websites.

(Click to enlarge all images. Also, the navigation text was made larger to be easier to see, but you’ll never need to have it THAT big!)

Click To Enlarge

#2 Left- or right-side navigation

This style was quite common in the early days of the Internet. It works well if your site has many pages because there is a lot more vertical space to play around with. The downside is that now you have less room in the content area for large images. Still a great choice for personal or small business sites that need more navigation. Take note in the image of the right-side navigation that the text is aligned to the right. You don’t have to do it this way, but it does look much cleaner.

Click To EnlargeClick To Enlarge

#3 Top plus one-side navigation

Now we’re getting “beefy”. At the top we have the main navigation — links to the main pages of your website. On either the left or the right we have the sub navigation — links to smaller pages on your site. This style is perfect for article websites, blogs, and websites with a large inventory of products. The main navigation helps visitors get to know your company, and the sub navigation helps the visitor browse through your large collection of goods or articles.

Click To EnlargeClick To Enlarge

#4 Top with double-sided navigation

Odds are you won’t be building a website with the “Inverted U” navigation style. You’ll mostly see this style on large news-related websites that have lots of content. The left-side navigation is often used to list the article categories while the right-side navigation is used to list other articles of interest in the category you are currently viewing.

Click To Enlarge

What can you do?

Obviously if you’ve cruised the Internet for any length of time you’ll have seen many other types of navigation as well as unique uses of the ones listed above. But before getting weighed down by all of the choices, follow this best practice: begin by listing all of the kinds of pages you’ll need for your new website, combine them into categories if possible, and then see which of the above layouts fits best.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!

2 Responses:

  1. George

    Fantastic explanation of website navigation!

  2. David R - Admin

    Thanks George! This is something that many beginners to website design have difficulty understanding. Glad I could help!


Share your thoughts below: