Design Your Navigation Menu

What good is a website if you can’t figure out how to use it? Most users will quickly leave a website that isn’t easily navigated. In today’s mobile-driven market, a clean and efficient navigation menu is more important than ever.

Let’s talk about your primary navigation menu. This menu is usually found in the header of your website, just under your logo. It may also be found elsewhere on your site, depending on your settings.

If you don’t intentionally design this navigation menu, one of two terrible things will happen:

  1. It will be unusable because you never added anything useful to it. Your readers won’t be able to find what they’re looking for and they will leave because your site isn’t easy to use.
  2. It will be unusable because top-level pages will automatically show up. It will become crowded, messy and outright ugly. Because it’s featured so prominently in most WordPress themes, this will result in an ugly, cluttered site and many readers will leave instead of trying to figure it out.

This is easy to avoid. Simply click “appearance” in the left sidebar of your WordPress install and then select “menus.”

How to Design Your Primary Navigation Menu for Maximum Usability

Your primary navigation menu should feature your most important top level pages and posts. Remember, this header should make it as easy as possible for your readers to efficiently use your website.

As of right now, this is how the primary navigation menu is laid out on this website.

Design Your Navigation Menu 1

The first thing on your Navigation menu should be a starting point.

Since the purpose of this website is to help people start successful niche WordPress sites from scratch, I decided the first button on the menu should be entitled “Get Started.” A user who clicks on this link will be taken directly to our primary landing page, which provides a step-by-step guide to setting up the website.

Of course, returning users who don’t want to start back at square one can hover over “Get Started” to see the names of each of our modules. Since Skilled Blogging is still less than a week old as of this writing, we’ve only completed three of the modules so far.

If your website won’t have a clear sequence like this, you can just name the first icon “Home” and have it link to your homepage. To do this, use the Custom Links option in the menu sidebar. Put your domain in the URL and Home in the link text. Ta-da!

Link to some of your most valuable content directly from the header. 

If you’re following our step-by-step WordPress tutorial, you don’t have very many pages yet (and you don’t have any posts). After you’ve published a few dozen posts, we’ll revisit the menu design to incorporate categories and tags to help your users navigate your most important content.

For an example of what that looks like, check out the navigation menu on Low Income Relief. This menu has quite a few submenus. For example, hovering on Free Stuff leads to a drop-down menu of landing pages related to free stuff. Hovering on Select Your State! opens a drop-down menu of all 50 states. This is the only way I could reasonably organize all of the content that exists (and will exist) on LowIncomeRelief.com.

Design Your Navigation Menu 2

Keep the boring stuff at the end of the navigation bar (on the far right side).

List all the important, useful stuff you want people to click on before you bore them with the standard pages: About, Contact and Disclosures. I generally keep them in that order because the About page is one of the most popular pages on a website. Nobody really wants to wade through the legalese in those disclosures anyway but they are a necessary evil.

You can tuck your privacy policy, terms and conditions and other necessary disclosures into a submenu so that they don’t clutter the main navigation bar. In the example above, I created a single page called Disclosures to organize those essential documents.

All done? Great! Let’s move on to the next module: creating content.

Leave a Comment