How To Add A Navigation Menu In Wordpress

Introduction

WordPress (WP) is an easy-to-use platform that includes a user-friendly interface to help users create new menus without the need for special coding skills. However, if you are not familiar with WordPress,  it can be daunting to dive in and add your first navigation menu. If you are struggling to create navigation menus on your WP website, you have landed on the right page. This tutorial will hold your hand and help you create a unique navigation menu without a hassle, assign it to an ideal location, and add items to the menu.

Goals

By the end of this guide, you will know how to:

  • Add a new WP menu
  • Use WP menus in widgets
  • Set the menu to display uniquely
  • Create advanced navigation structures
  • Add your navigation items to the menu

Ready, let’s go!

Step 1 - Creating a Navigation Menu

Creating a navigation menu is the first and very important step. To create a new menu on your WordPress site go to WordPress dashboard. Click Appearance and select Menus.

This will take you to the Menus interface. Here you have two options; you can either edit an existing menu or create a new one. Since we want to create a unique menu, Click Create a new menu.

A new window will appear, Enter your Menu Name. The name you select is just an internal name to make it easy to recall the menu; your visitors will not see this name.

Once you specify the Menu Name, click Create Menu.

That's it! You have successfully created a new menu on your WP website.

Step 2 - Assign the new menu to your preferred location

By now, you have created a new menu. Next is to assign this menu to the desired location. After selecting the Create Menu (in the previous step), a new page will appear with Menu Structure and Menu Settings options.

Our point of interest in this step is the Display Location, which is one of the options of the Menu Settings. The display location tells WP where to add the new navigation menu on your Live website. Here, you have to make a wise choice regarding the location of the newly added navigation menu. The options under the Display Location may vary from theme to theme, some themes include Primary, Primary Menu, and Primary Navigation Menu options, whereas others have Main, Top, and Header options. Your interface might include different Display Location options than the one in our screenshot.

Check the box of your preferred Display location then click Save Menu.

Step 3 - Adding Items To Your Navigations Menu

By now, you new navigation menu is almost done, All that is left is to add items to appear on this menu. There are a lot of things you can do here, and we’ll give you the most important.

Adding a New Item In Your Navigation Menu

To add a new item to the navigation menu, we'll use the left sidebar under the Menus interface: This sidebar has four options namely Pages, Posts, Custom links, and Categories.

To add a link to the Contact Page, Check the box for the Contact Page and Click Add to Menu.

The Contact Page will appear under the Menu Structure option on the right sidebar of the menu interface.

Customizing The Navigation Menu

WordPress is designed to use the actual name of a page, category, or post for the text on your navigation menu. However, the platform gives you the option to change this. To customize your navigation menu click the Arrow Icon on a menu item.

Edit the Navigation Label as desired.

Rearranging Navigation Menu Items

Once you create numerous menu items, you might find it necessary to rearrange them to suit your website design. Rearranging menu items is easy, just drag and drop an item into its desired position. Remember, a Menu item can also be dragged underneath another item to make it a submenu.

Removing a Navigation Menu Item

To remove an item from the navigation menu, click the arrow Icon and select Delete from the drop-down menu.

Creating a Dropdown Submenu

Drop Down menus are common on modern websites and creating them is fairly easy, just drag and drop items under a parent Menu item.

This instructs WP to mark items in your drop down menu as sub-items. It also easy to create multiple levels of menu items nesting like this:

When creating drop-down menus sometime, you may want to lock the parent menu item so that it’s not clickable. To accomplish this, click Custom links and add # in the URL section. Enter your desired Text in the Link Text section, and click Add to Menu.

Next, drag and drop the menu item you added the parent menu. Edit the menu item and remove the # and leave the URL section blank. This step involves a bit of workaround since WP doesn't allow you to create a blank item.

That's all! Your website visitors can hover this menu item, but it will not be clickable; they will only access its drop down items.

Adding Custom Links to The Navigation Menu

A custom link lets you:

  • Add an external link to other websites.
  • Quickly link to locations on your website, even when it’s not a basic WP page or post

To accomplish this, go to Custom Links, add the URL of the link location in the URL box, and click Add to Item.

Editing Menu Items with  Live Preview

WordPress gives you an option to edit the menu items and see the changes appear in real-time. To accomplish this go to Appearance and select Customize and click the Menus option on the customizer sidebar.

As you make changes to the menu, your WP website will provide a real-time preview reflecting all the changes made.

Displaying WP Menu is a Widget

If you want the navigation menu to display items in the widgetized area, go to Appearance and click Widgets. Locate the Navigation Menu and drag the widget to the desired location.

Assign an optional title to the widget, then select the Menu via the Select Menu dropdown. Click Save.

That's it!  Your navigation menu should appear in the selected Widget area.

Conclusion

That all! You have successfully added a navigation menu to your WordPress website. It’s our hope you found this guide useful, and you have achieved the goals described in the introduction part.

 

Check out these top 3 WordPress hosting services:

Was this article helpful?