navigation bar

WordPress Navigation Bar – How To Create Navigation Menu

In today’s tutorial I will cover WordPress navigation bar and you will learn how to design a truly functional bar for easy sailing through your WordPress blog. You will learn how to create primary and secondary navigation bars and how to create navigation menu with a dropdown option for your blog’s topics and subtopics.

This is an exciting lesson because when you apply what you’ll learn, you will vastly improve the way your visitors will be able to walk through and explore different sections of your WordPress blog.

What Is A WordPress Navigation Bar

WordPress navigation bar is the part of your blog just below the header. (There are some WordPress themes that have the navigation bar in the sidebar, but it is not common or recommended.) Navigation bar contains the tabs of all the different sections and subsections of your WordPress blog. It is a very important element of your site.

Well designed navigation bar and tabs ease the movement through your blog and significantly improve visitors’ and search engines’ experience. And, this is hugely important!

Image 1. An Example Of WordPress Navigation Bar

example navigation bar
The above example is a partial view of Blogging Spree primary and secondary navigation bars. The option to create the secondary one depends on the WordPress theme of your blog.

Each navigation bar contains a set of primary tabs which relate to the main topics of your WordPress blog. The subtopics are housed in the secondary tabs. The secondary tabs are contained within a dropdown box.

Image 2. Example of Navigation Bar Drop Down Box

example of drop down menu
As you can see, WordPress 101 tab on my site expands into a set of sub-topics in a dropdown box. The dropdown box is also known as sub-menu.

In case your WordPress theme does not offer the secondary navigation option, you can use the Footer section of your blog to house the links of secondary topics of importance, for example, Contact, About, Disclaimer, Sitemap and so on.


How To Create WordPress Navigation Menu

Before you can create a powerful navigation bar you have to have a strategy to display the topics of your WordPress blog in some easy to follow fashion. You need to have a list, in other words a menu, of the main topics your site revolves around.

To design a menu you can use Categories, Pages, and independent Links. To follow today’s WordPress tutorial, it is important that you understand the topic of post categories. If you are not completely clear about this subject it would be helpful to you to go through the WordPress categories lesson.

Throughout this WordPress navigation tutorial I will use categories examples from the demo blog They are fitness categories and they are the same ones as describe in the WordPress Categories tutorial.


To begin the process of creating a navigation bar, access Menus Option from your WordPress Dashboard.

Image 3. Access To Menus Dashboard

in Appearance clock on menus

In your Home Dashboard select “Appearance” to expand it and then click on “Menus”. You will arrive at a dashboard where you will be able to set up both, primary and secondary menus.

Image 4. WordPress Menus Dashboard Page

wordpress menus dashboard new install

A newly installed WordPress blog, by default, will show no menu. You can start creating one by either adding a name in the name field or by clicking on “create new menu” in the top left corner. I named mine “Primary”.

Creating Primary WordPress Navigation Bar And Tabs

Let’s first create the primary menu. It will be placed on the navigation bar, right underneath the header (or just above the header in some WordPress themes).

After you enter the “Primary” name and click SAVE on the bottom of the page, WordPress will immediately create a new dashboard as shown bellow.

Image 4a. Newly Created Primary Dashboard

creating primary menu

Step 1. Configure the settings.

On the picture above, notice the section “Menu Settings”. There you have 3 options:

  1. Auto add pages – leave the box blank. You do not want your pages added automatically after you publish them. It would just cause a lot of mess. You want to be able to add pages to your manually, and only the ones you deem important.
  2. Theme LocationSelect the box labeled “Primary”.
  3. Social Links Menu – leave the box blank. This is a new WordPress option. Depending on the theme you are using, you may or may not see this option.

After you select the Theme Location, save the settings!

Step 2. Adding items to your primary navigation bar.

On most newly installed WordPress blogs, there is no navigation bar (see below). In order for it to appear on your blog, you have to add your chosen topics to the menu. They will become tabs or sub-tabs on your nav bar.

Image 5. Newly Installed WordPress Blog – No Nav bar

no menu bar

Tabs can be generated from titles of Categories, Pages, Links. You can also create special Title tabs that are independent of the list of categories and pages. They stand on their own. There is a little trick to create a stand-alone Title and I’ll share this trick later.

The first item you want to add is the Home tab. This will the home (front page) of your WordPress blog and the destination where people arrive at when they click your domain name. For example, this blog’s home page is: and the demo blog’s home page is:

  • Creating Home Tab Using The Link Method

Note: Sometimes Home tab is generated by default when a WordPress blog is installed . If it appears by default, it reflects the “Front Page display” selected by default in the Reading Settings in your main Dashboard. If your installation shows Home, then leave it. Home tab is one what you want. You can always change the page Home links to at a later date.

Image 6. Adding Home To Nav Bar – Link Method

adding home to menu bar

  1. Expand the “Links” window.
  2. Add URL of your home page.
  3. Add Link Text – Home
  4. Click Add to Menu
  5. Save

Image 7. “Home” Added To The Structure

Home added to menu list

As soon you as you click the “Add”button, the item will show on the list of items, on the right hand side. After you click “Save” the WordPress system will create a new tab on the navigation bar and the Home tab will show there.

Image 8. Navigation Bar With Home Tab On Your New Site

Home on navigation bar

  • Generating Tabs Items Using Pages

Your default WordPress blog comes with one page called “Sample Page. For an example, I’ll use this page to create a Page tab.

Image 8. Adding Pages To The Menu

default page menu item

Tick off the page you want and click “Add To” box. The page will be added to the list. Save your changes!

When you create more pages, for example Contact Us, About, Privacy Policy, all the pages will be listed in the the Pages window. You will be able to select them all, or just some, to add to the list.

Note: The “Pages” list is a list of Titles of your pages. Some titles may be too long and they would take too much space on your navigation bar, plus they would look ugly and unprofessional. Toward the end of this tutorial I will show you how to change the long Page names on the list of items to short names.

Image 9. Example Of A Page Tab On The Navigation Bar

navigarion bar with page

After you saved the changes you just made a Page tab (in this case “Sample Page) appears on the navigation bar.

  • Creating Tabs From Categories

Using categories is the most popular way to create navigation tabs on your WordPress blog. For the rest of this tutorial I will use the demo site, and the categories and sub-categories I use there. I will be using them to develop main and sub-level tabs in this tutorial.

In a previous tutorial I showed you how to create categories. It would be helpful to you if you went through that tutorial (but it is not absolutely necessary for this demo). But, you need to have your categories designed before you start designing the menu.

Image 10. Adding Categories To Blog’s Menu

select all categories for menu

  1. Click on Categories drop down prompt (right hand corner) and expand the Categories window
  2. Click “View All” tab
  3. Tick off all the categories you want to include in the list. If you want all of them, click “Select All”
  4. Click Add to Menu
  5. Save the settings!

Image 11. Your Newly Created Menu List

newly created menu

Let’s see how it looks on the blog.

Image 13. Newly Created Tabs On The Demo Blog

menu bar with categories

As you can see, all the tabs are displayed on the home page. But there are too many tabs and instead of a single line, we have a double line, which does not look good on a website. It looks too crowded and too unprofessional!

Customizing Navigation Menu Items

To make the navigation bar more acceptable, we have to customize the list and create a dropdown list.

Creating Dropdown Box And Changing The Order Of Topics

  • First, let’s reorganize the order of the tab topics

Changing the order in which the items appear is very simple. All you have to do is drag the list item and drop it in the position where you want it.

Image 14. Changing the List Order

rearranging menu items

  • Creating a Dropdown Menu

To create sub or a dropdown menu also requires that you drag and drop your list items.

Instead of dropping it in line with the rest of the items, the sub-item needs to be dropped slightly to the right. In the same vein you can also create sub-sub-tabs (and a sub-sub-dropdown box).

Save your changes!

Image 15. Creating a Drop Down Sub-Menu

creating submenu

Let’s have a look at how the dropdown looks on the demo site. When I hovered over the Fitness Workouts on the home page of the demo site, there is a dropdown box.

Image 16. Drop Down Menu On The Home Page Of The Demo Site

sub-categories in dropdown menu

  • Deleting Unwanted Items

We really don’t want the Sample page in the navigation. Over time it may happen that you too may add a tab and then change your mind. You will have to delete the tab. It is also simple to do.

  1. On your Menu list, click “Page” prompt to expand the window
  2. Click “Remove” to delete the item

Image 17. Delete Unwanted Items

remove menu items

  • Creating Stand-Alone Tab Titles

These tabs will appear on your navigation bar, but they will not be linked to pages or categories.Then you can create a list of subtopics and place the list underneath the title of the tab. The list will show as a dropdown when you hover or click on the Title tab.

This is useful when you want to place different categories or pages under one heading. For example, on Blogging Spree, I have a heading “The Chat”, which is a general heading. Underneath the title are several categories of varied and general nature. They can be seen when you hover over The Chat tab or click on it.

Image 18. Example Of Stand-Alone Heading

example of stand-alone item

I created stand-alone “The Chat” title also on the demo site. To create it takes a little trick.

  1. First create a menu item using the link method (Image 6.) In other words: A a name you want the tab show. In the link box add a link. It can be any link, because you will delete it in the next few steps.
  2. Add the linked item to your list
  3. On the Menu list (right hand side) expand the new tab’s “Custom” window
  4. Delete URL
  5. Save the changes!

Image 19. Creating a Stand-Alone Item

create stand-alone menu item


  • Changing The Names Of The Tabs

We will do one more improvement. We will change the names of the tabs but we will retain the title attribute. What that means is that we can change the titles of the tabs to different names, but search engines will recognize the new names as the original category names we selected. (I know that it sounds convoluted but it is necessary to do and it is also very simple to do.)

The reason you want to do this is that the names on the menu may be pretty long and it won’t leave us much room to add additional items such pages, for example, Contact and About Us, without going into the second row. And, unfortunately, the default WordPress themes and even some premium WordPress themes do not offer us the option of creating additional menus, like the top one you can see on


To change the title name:

  1. In the menu list expand the window of the item you are working on. In this example I am going to change the category name “Fitness Workouts” to “Workouts”
  2. Add the original category name (in this case “Fitness Workouts”) to Title Attribute field
  3. Change the Navigation Label to another word (I changed it to “Workouts”)
  4. Save changes!

Image 20. Changing Names Of Menu Items

customizing navigation menu

Finally, the navigation bar on our newly installed WordPress blog is complete. Let’s have a look how the new customization looks on the demo site.

Image 21. Completed Navigation Bar

completed navigation bar
It looks pretty cool, doesn’t it? What is nice, is that there is still room to add a few more tabs. Since, at this time, the demo blog uses a WordPress default theme (Twenty Twelve), there is no option to add another menu bar, like it is on Blogging Spree, which uses a different WordPress theme.

Even though Twenty Twelve Theme does not have the option to create an other menu bar, I am not going to leave you hanging. I am going to show you how to add a top menu, in case your theme does have an option to do so.

Creating Secondary Navigation Bar (Top)

On Blogging Spree I have a secondary navigation bar above the header. I primarily use it for important, but secondary information. This allows me to have more space on my primary bar for the main and important topics.

Not all themes allow it, so if you are going to change a theme from the default WordPress theme, make sure this option is available on the new theme you choose (and particularly if you are going to buy a premium theme for which you have to pay).

Creating the secondary menu is just as simple as creating a primary one.

Step 1. In your Dashboard Click “Create New Menu”

Image 22. Creating a Secondary Bar

create-secondary menu bar

Step 2. Give it a name

Image 23. Creating a New Menu

creating secondary menu

In the “Menu Name” add the name of your secondary navigation bar. Make sure to save your new addition.

Step 3. Select your new menu to edit. Select the one called “Top”.

Image 24. Select The New Menu To Work On

select top menu

When you make the selection a dashboard will open up.

Make sure that the “Top” is ticked off. From the list of items on the left (Categories, Pages or Links) add the ones you want to show on the secondary (in this case “Top”) menu list.

Image 25. Creating Top Menu List

creating secondary menu bar

Follow exactly the same steps as we went through above to create the primary navigation bar. Likely, you will only be adding pages to it, similar to what I have on my blog (Blogging Spree). If that is the case, go back to Image 8. and repeat the process. The only difference will be that you will be in the “Top” and not “Primary” dasboard.

Thanks for lasting through this long WordPress Navigation Bar tutorial. I hope this tutorial will help you create a navigation bar with tabs and sub-tabs that will be awesome and very useful to the visitors and search engines of your newly installed WordPress blog.

Next Tutorial: WordPress Widgets

Back to Table of Contents


millionaire's brain ad

, , , , , , , , , ,

2 Responses to WordPress Navigation Bar – How To Create Navigation Menu

  1. Lalit February 10, 2015 at 10:33 pm #

    Thanks for such a wonderful post..
    Its quite good for beginner like me..
    Lalit recently posted…Get Rs.50 talk time+Rs.250 coupon+1000 Reward pointsMy Profile