How navigation menus helpfully tidy your tabs

© atsunori kohsaki, Tokyo Colorful Navigation, via Flickr

It's important to make it easy for your blog's visitors to know where they are supposed to go.

Therefore your blog's navigation area, wherever it is placed, should be informational, enticing and easy to understand.

And if you're confined for space, using the right kind of words and how they are presented could make a difference whether your visitors click or not.

Take control of your navigation

My last post was about how to order your blog's navigation tabs, and the post before that was about how a homepage provides a home tab on your navigation bar.

This post is all about navigation menus. This is when you can create navigation tabs that link to your pages without necessarily containing the page titles in full.

This can be very useful, especially if your pages have long, descriptive headlines, but you don't want these to show in your navigation bar.

For example, look at my navigation area:

You can see the tabs consist if single words. The 'Learn' tab goes to a page with a longer title:

Which if it was in full in the navigation bar, it would take up too much room.

Not every theme allows an extensive navigation area, and sometimes it can look unprofessional if your navigation goes over onto another line because of lengthy tabs.

Let me introduce you to navigation menus

Creating navigation menus can be done in both WordPress.com and in self-hosted WordPress.org blogs.

They are found in the 'Appearance' area. First go to your Dashboard via 'My Sites' and then select 'WP Admin':

or if you've got a WordPress.org blog, via the drop down menu from your blog's name:

And in the Dashboard left sidebar, find 'Appearance' and then select 'Menus' from the drop down menu:

You will now see the 'Edit Menus' page with no navigation menus in it yet:

The first thing to do is to create a new navigation menu by giving it a name:

Something simple like 'Main Menu' is very suitable. This will become the main navigation bar you will see at the top of your blog.

Once you've clicked on the 'Create Menu' button, your Menu Structure will be activated and ready to receive its page links:

And the Pages area has become activated too:

Here you can see all your pages listed. If not, click on the 'View All' tab to see a complete list.

Select the pages you want to include in your main navigation bar:

And once you've clicked the 'Add to Menu' button, they will show up in the Menu Structure area:

Note the 'Home' tag has taken second place.

Obviously this should be at the top. So take your mouse and simply drag the 'Home' tab to the top of the list:

When you do this, you'll see a dashed area appear where the 'Home' tab will be dropped into.

Make sure these dashed lines are aligned as far left as they can go. This will maintain the tab's priority over the others, and keep it as a 'parent' link.

I will explain more about 'parent' and 'child' links in just a second.

Meanwhile, rearrange the rest of the tabs in the order you prefer, making sure they are all aligned fully left:

Important: tick the 'Primary Menu' option in Theme locations (this confirms that this menu is for the main navigation bar at the top of your blog), and then click the 'Save Menu' button.

You will see when everything is completed through the confirmation at the top of the page:

Now what about this 'parent' tab?

I have already discussed the relationship of parent, children and grandchildren links earlier in my post about categories, and the same concept can be applied to your navigation menus.

If you mouse over my 'Blog' link in the navigation bar of this blog, a drop down menu appears showing my categories:

These categories are 'child' tabs leading from the 'Blog' tab which is their parent.

This is how they are created. Let's take the 'Hire Me' page and make it a child tab of the 'About Alice' page.

In the Pages section, select the 'Hire Me' page:

Once you've clicked the 'Add to Menu' button, it is automatically placed at the bottom of the list in the Menu Structure area:

Now you need to drag this tab into its correct place.

Since this is a 'child' tab, it needs to be indented underneath the 'parent' tab. Note where the dashed lines appear and place the tab just a bit to the right before you let go of the mouse:

And then you will see that the 'Hire Me' tab is classified as a sub item:

Don't forget to click the 'Save Menu' button when you're happy with your 'child' tab's position.

Check out your new navigation bar with is child tab. Go to 'My Sites' and select 'View Site' from the drop down menu:

And for WordPress.org blogs go to your blog's name and select 'View Site' from the drop down menu:

And view your 'child' tab by mousing over the 'parent' tab:

But you used categories for your child tabs on this blog

Yes, I did, well spotted.

If you look at the bottom of the Pages section, you will see options for Links and Categories (and Format, but you needn't worry about that one):

Let's look at Categories first.

If you click on that section, it will open up to reveal the categories you have chosen for your posts (see my categories how-to post to find out more about these):

And the principle is the same. Select the category you wish to appear under the 'Blog' tab:

And position it as a 'child' tab:

You can see that it is shown as a Category tab.

The Link section allows you to create a navigation tab that directs your reader to an external website. Click on it to open it:

In the 'URL' field enter in the external website or blog's URL or web-address, and the 'Link Text' field contains that tab's name or description:

And after you've clicked the 'Add to Menu' button, it will appear at the bottom of the Menu Structure list:

And you can see it is termed as a Custom tab.

But how do the tabs only have a single word?

You saw in the Link tab option that I could name it before it was inserted into the Main Menu.

You can name the other tabs as well.

Click on the 'About Alice' tab to open it up:

In the 'Navigation Label' field, you can rename the tab to whatever you want:

(And you can also see how you can 'Remove' the tab if you don't want it in the Main Menu any more.)

Click on the little triangle by 'Page' at the top right of the tab to close it:

And your newly named tab will be revealed:

Now finish renaming and rearranging all the other tabs to whatever you want:

Click the 'Save Menu' button to stop you losing what you've just done, and then go and inspect your new navigation tabs:

I hope you approve!

The next How-To post in this series shows you how to create another version of navigation menus for your blog's sidebar.

The following two tabs change content below.

• Bio
• Latest Posts

Alice Elliott

Alice Elliott writes the Beginner Bloggers blog for beginner and post-beginner bloggers to “explain things really simply” about blogging and WordPress. She specialises in simple, easy to understand, highly visual courses and tutorials using ordinary, everyday words. Why not also visit her award winning Fairy Blog Mother blog to learn some more.

Latest posts by Alice Elliott (see all)

• How to create a blog if you’re a real beginner - 9 January 2016
• Comparing blog post writing pages - 27 August 2015
• Comparing blog post listings pages - 19 August 2015