How to Create A Navigation Menu in WordPress in 2020

How to Create A Navigation Menu in WordPress

Introduction

Are you struggling to create a navigation menu on your WordPress site?

WordPress (WP) is a quite user-friendly platform that allows you to create new navigation menus without having any coding expertise. But if you are not well informed about WordPress, creating your first navigation menu can be quite challenging.

Contents

How to Create A Navigation Menu in WordPress

If you are looking for ways to ease your struggle, then you have come to the right page. In this step-by-step tutorial, you’ll learn everything that is needed to create and customize a detailed navigation menu for your WordPress website.

By reading this post, you’ll learn how to:

Create a new WordPress navigation menu
Choose a location to display menu
Add navigation items to the menu
Create more advanced navigation forms
Display WordPress menus in widgets

Let’s jump right in!

Step 1 – Creating Your Navigation Menu

Navigation menus are a significant asset of every website. The creation of a navigation menu is the prime step. Follow these steps to create a new menu on your WordPress site:

Head to your WordPress dashboard
Click Appearance > Menus

When you click this, you’ll be taken to the Menus interface. It will give you two options: either edit an existing menu or create a new menu. To create a new menu, here is all you need to do:

Click on the Create a new menu link

A new window will be shown.

Specify a Menu Name – This name is an internal name that makes it easy to recall the menu – It won’t be visible to your visitors.
After you specify the name, click Create Menu.

There you are! Your new navigation menu on your WordPress site has been created successfully.

Step 2 – Assign the New Menu to Your Desired Location

After you have created the new menu, the next step is to assign this new menu to your preferred location. On clicking Create Menu in the previous step, you will be shown a screen with Menu Structure and Menu Settings options.

Under the Menu Settings, you’ll find the Display location option which is of our prime interest here. This option tells WordPress where you would like to insert your new navigation menu on your live website. But it is important to note that the location of the new navigation menu should be chosen intelligently. You’ll find the following options listed under the Display Location:

Primary
Secondary
Mobile

However, the other themes have Main, Top, and Header options. It is quite possible that your interface shows different options than this screenshot as these options vary from themes to themes.

Once you find the right location for the menu:

Check that box.
Click on Save Menu button.

Step 3 – Adding Items to Your WordPress Menu

At this time, your new navigation menu is almost ready to finish. The only thing that left is to add items that will appear on your WordPress menu. You can add a lot of elements to your navigation menu, and we’ll discuss the important ones.

3.1. Add new elements

To add new elements to your navigation menu, you’ll need to use the sidebar menu on the left under the Menus interface. In this sidebar, you’ll notice four different sections including Pages, Posts, Custom Links, and Categories.

If you want to add a link to your Contact Page:

Check the Contact
Click on Add to Menu button.

After you click the Add to Menu button, you’ll notice that the Contact Page will appear under the Menu Structure option on the right sidebar of the interface.

3.2. Customizing the WordPress Navigation Menu

Normally, WordPress uses the actual name of the page/category/post for the text on your navigation menu. But with this platform, you are allowed to change this.

To customize the navigation menu:

Click the Down Arrow icon next to any menu item.

You can edit the Navigation Label as you want.

3.3. Reordering the Navigation Menu Items

Once you start adding numerous menu items, you might find a need to reorder them into your desired position. WordPress makes the items rearrangement quite easy, allowing you to drag and drop items into any order you want. Also, you can drag a menu underneath another item to create a sub-menu.

3.4. Deleting the Navigation Menu Item

You can remove any item from your WordPress navigation menu by:

Clicking the Down Arrow icon on the right side.
Select the Remove

3.5. Creating a Drop-down Sub-menu/ Nested Menu

Today, drop-down sub-menus can be seen on every website and creating them is not difficult at all. All it requires is to move one child menu item below the parent menu item using the drag and drop technique.

When you do this, WordPress marks each item in your drop-down menu as sub-item. Moreover, this platform allows you to create multiple-level/ nested menus like this:

Sometimes you’ll run into situations where you want the parent menu item to act as a trigger for the drop-down menu and to be un-clickable.

To lock the parent menu item:

Click Custom Links.
Add # symbol in the URL
Enter whatever text you want in the Link Text
Click on Add to Menu button.

Now, when visiting your site, this parent menu item will reveal the sub-menu, but will not link anywhere.

3.6. Adding Custom Links to The WordPress Navigation Menu

Like adding pages and categories, you can also add custom links to your WordPress menu. With Custom Links option, you can link to any location on your site or add external links to other sites.

To add a custom link:

Click on the Custom Links tab in the left sidebar.
Add the actual link of the location in the URL
Enter the anchor text for the link in the Link Text
Click on Add to Menu

Note: To avoid broken links, it is advised to start all the links with http:// or https://.

3.7. Editing Menu Items with Live Preview

All the changes we have made in this article so far are done using dedicated Menus interface. But WordPress has another way to let you edit the menu items while seeing the changes in real-time.

To edit menu items with live preview:

Go to Appearance> Customize
Select the Menus option on the WordPress customizer sidebar.

Select the menu and make some changes.

As you make changes to your menu, your WordPress website will be automatically updated and reflect the changes made with live preview.

3.8. Displaying WordPress Menu in Widget Areas

To display your navigation menu items in Widgets or any widgetized area, you need to do this:

Go to Appearance >
Find the Navigation Menu.
Drag the widget where you wish to appear.

Set an optional title to the widget.
Select the Menu from the Select Menu
Click the Save button

Once you click the Save button, you’ll see your navigation menu appearing in the relevant Widget area.

Conclusion

A good navigation menu is always necessary to keep your visitors move around your site faster. We hope this tutorial helped you learn how to create a navigation menu in WordPress, and you are now capable of creating new ones without any difficulties.

If you find this article useful and comprehensive, don’t forget to share it with your friends!

5/5 - (2 votes)