Select Page

WordPress Navigation Menu is the most active and important area of your website because it contains all the important (primary page) link to your site. It allows you to present a site structure of your website to your users.

navigation menu example of website

navigation menu

WordPress Navigation Menu Bar helps users to find information and browse through different sections of your website very easily. A good and well design navigation menu bar does not only help to the user but also helps the google, bing, Yandex and another search engine bots to crawl your site efficiently. Usually, people don’t focus on the navigation menu. But if you check the static of your site you will realize maximum clicks are done through Navigation Menu and Sidebar. In this article, we will explore the feature and use the option available in the WordPress Built-in Menu to create

  • Drop down menu,
  • Place link the in the menu,
  • Add a social link
  • WordPress custom menu

In the WordPress Menu.

Introduction WordPress Menus

WordPress Navigation menu comes with the very easy drag-and-drop interface that allows a user to create a simple as well as drop-down menus in WordPress. It quite easy for beginner users to Create Custom Menu and manage their location in the WordPress. First, have a look at the Website Structure.

Website site structure

Website site structure

Form the above screenshot, you have an idea about the website structure, its components name, and location. Let us move next. The location of the menus option available in apperance>>Menu.

Wordpress Menu Location and default feature

WordPress Menu Location

Here you will see the default WordPress Menu feature are:

  • Page – Adds a link to another page on your site.
  • Post – adds links directly to a blog post/article on your site.
  • Custom Link – Adds a custom URL linking to another site like facebook, twitter etc
  • Category – Shows a feed of blog posts from a given category.

Note:  There’s no limit on how many menus you can create,

Create Custom Menu In WordPress

The built-in WordPress Menu feature allows you to create your own custom menu in place of your theme’s default menus. lets we start with the basic thing, Adding page link to WordPress Navigation Menu by creating WordPress custom menu 

  • First of all, Login your WordPress as an Admin and click on Appereance>>Menu.
wordpress Menu with label detail screenshot

WordPress Menu

This is the screenshot of the just install WordPress and here you will see some options. like post, page, category and custom link as I told you above. Before starting diving into it, you must have to learn the basic difference between post and page in WordPress. So that you can easily understand what I’m going to say. So, Lets we start. First of all, you have to Create a Menu (for understanding we can say that it is a group of page/post/link/category).

  • Click on Appereance>>Menu and give a name to a Menu (group) and click on Create a Menu.
create a menu in wordpress

create a menu

Note: Always give a Name according to where you are going to use it. So that, in future you can easily remind it. After creating your first WordPress custom menu. You will see a two new Tab of Manage Location and Menu Setting.

just created Menu in wordpress and activate option for menu

Activated Option

Do, you will notice one thing, all the options are activated and you can use it now. But, we first check “Manage Location” Tab after that we come back to our main topic. When you click on Manage location, you will see some options.

menu location option in wordpress

menu loaction

Note:  This Option is depended upon the Theme and plugins that you are using right now. You can set the location from here where you want to show this WordPress custom menu (a group of link) Let me share with you, my screenshot of Mange Location.

screenshot of Manage location menu

Manage location

Now you can see my theme have three option, Primary Menu, Secondary Menu and Footer Menu. But if you check the option available in default WordPress theme is Top Menu and social link menu. Note: Terminology and option can also be varied by theme to theme as well as by plugin. Ok, Let’s come back to the WordPress menu Option and create a Custom menu in WordPress. Right now I have only a sample page (default WordPress page). First, we only use this page and after that, we will add some new page and add it to the WordPress Menu.

  • Select the page and click on Add To Menu.
add page to menu in wordpress

add page to menu

When you click on Add To Menu Button, your all selected Page will be automatically added to the WordPress Menu that you just created. After that, you have to select the location where you want to show it and click on save. Right now I’m selecting a Top Menu option. So let check how it looks on the front end.

Your Page on Navigation Menu wordpress

Page on Navigation Menu

So, Now you have a clear cut view create WordPress custom menu. This is just an example, We can do a lot of interesting things in WordPress menu just stay with me.

Create WordPress Dropdown Menu

If I add some more page in the Menu and arrange it as shown in the below screenshot by Dragging them on each other.

Sub-level menu in wordpress

Sub-level menu

Then how is it look on the front end? All the page that is in the Page-2 ( parent page of 3,4,5) is shown in the dropdown Menu when someone hovers over it.

create a sab page menu in the wordpressa

create a sub page menu

Now you know how to creates a WordPress Dropdown Menu in WordPress. Note: You can also be changed the name of the Navigation that is showing on the WordPress Navigation Menu bar.

  • Click on Dropdown Menu and change the name “sample page” to “Home”.
rename the label of the link in WordPress navigation menu

rename the label of the link

Just close the drop down menu. Leave the page and go to the front end and see the change.

Add Post To Navigation Menu Bar

Adding Post to navigation is similar to add the page in the Navigation Menu. It looks something like this.

add post on home page navigation menu

add post

Select the post and move this post in the WordPress menu and save the Menu. it’s simple hmmm. But Here, I tick one more option that is  “Automatically add new top-level pages to this menu“. By doing this. Ever page (not a post) you will publish in future will automatically add into this Menu.

automatically add new page in wordpress menu

automatically add a new page

You can see, I update a new page with the name  “Newly published Page 6” just now and it automatically added to the Navigation menu.

Add Category and Custom Link In The Navigation Menu Bar

The process of adding a category to the navigation menu is also same as post and page. But there is one thing that you should have to take into the mind before doing this. If you add a category in the Menu than all post under that category will be shown only when someone clicks on it not hovering on it.

  • Do the setting as shown in the screenshot below and save WordPress menu.
add category in the navigation menu

a category in the menu

Let, check how it looks on the front end.

show category on home page on website

homepage

Now the last but important form all of them that is Custom Link The Process of adding custom link in the WordPress menu is little different than other.

  • Click on Appereance>> Menu and then click on a custom link.
Add custom link in the navigation menu

custom link

First, add the label that you want to use and then enter the link (URL). It looks something like this on the front end.

add link on header in wordpress menu

add a link on the header

You can use custom link to do following things,

  • Add a Social Link
  • Add Important Link
  • Add another website Link
  • Add Signup, Registration, and Login/logout link

Note: You can add only one Menu to one Location. So try to add Page, post, link, and category according to your need in a single Menu (group) So this the brief introduction to WordPress Menu.

Advanced WordPress Menu Properties

There is few more option to that you should have to learn to Customize and style the Menu.

  • Click on the screen option on the Top-Right corner and enable all the advanced menu properties option and click on Save Menu
screen option in wordpress menu

screen option

After enabling all the option in the screen, When you open the drop-down menu you will see the following new option.

enable advanced menu properties in wordpress

Advanced menu properties

Title Attribute: The text you write in the box will be displayed when a user’s mouse hovers over a menu item. Link Target:  It helps you to make your link open in the Same Window Tab or in New window Tab. CSS Classes: This Option help you to add CSS class which is used for designing purpose. (it is all technical work) Link Relationship (XFN): Allows for the generation of XFN attributes automatically. So you can show how you are related to the authors/owners of the site to which you are linking. Description: Description for this link. (description will be displayed in the menu if the current theme supports it) These all options look like normal options but it is very useful to optimise your site for the user. Have a look at this screenshot.

use of title attribute in wordpress

title attribute

How clearly you can tell your user if you click on this link it will redirect you to the homepage.

Other Location To Manage WordPress Menu

As I told you, you can manage Menu form more than one location if your current theme supports it. right Know I’m using a Twenty-sixteen (default WordPress theme).

  • Click On Appereance>>Customize
WordPress customise for Menu

Menu

When you click on Customizer, then a new screen will be open. Here you can see the change in the Real Time

  • Click on Menu
menu loaction in customizer in wordpress

menu location

Here you will see the list of all the Menu that you created previously. Click on the list that you want to add and set the location where you want to show it.

real time change in menu in customizer in wordpress

real-time change

Note: All the change you can see in real-time without saving the setting. So this the brief view to the WordPress Menu that helps you to do whatever you want to do with the menu. I hope you like it and don’t forget to check the hidden option of the WordPress Post Editor Toolbar and unlock the WordPress Post Screen Option that helps you write content in WordPress easily.

Recommended Post

Remember to share this post with anyone who might benefit from this information, including your Facebook friends, Twitter followers and members of your Google+ group! And also Support Us By Liking Our FacebookTwitter, and Google+ Page. If you have any suggestion or problem about WordPress custom menu please feel free to comment below.

Follow me

Harvinder Singh Sharry

owner at Hitechwork
I'm Professional Blogger, SEO, and Digital marketing expert. I started my blog in 2016 with the aim to share my knowledge and experiences for the people associated with my field as well as for the general public.
Follow me

Be the first to get the latest Updated WordPress Ping List.

We will send you a newly update ping list after every two months.

Confirm your Email

Pin It on Pinterest

Shares
Share This