WordPress

How to Add a Navigation Menu in WordPress

This tutorial explains how to add a navigation menu in WordPress easily. After reading this tutorial, you will be able to add navigation menus through the dashboard or from the customization screen. The last section also describes the steps to add menus in widget areas.

The examples described also show how to add dropdown menus in your navigation menu to customize the structure entirely. But remember that abusing submenus may not be convenient for users with vision impairment. All instructions explained in this tutorial include screenshots. Thus, making it easy for all WordPress user levels to apply them.

How to Add a Navigation Menu in WordPress From the Dashboard:

To begin, login to your WordPress dashboard. On the left menu, move your mouse cursor over Appearance, and then press the Menus option (Appearance>Menus):

In the Menus screen, you will see a dropdown menu (left arrow) where you can select an existing menu to edit. If you want to edit an existing menu, select it in the dropdown menu and press the Select button (Middle arrow).

If you want to create a new menu, press the Create a new menu link (right arrow).

For this tutorial, I will create a new menu by pressing the Create a new menu link.

In the Menu Name field, type the name for your new menu. This field is arbitrary and will not be visible to your visitors. Once you type the menu name, press the Create Menu button.

The new menu will be empty, as shown in the screenshot below:

On the left side, you will see different options: Pages, Posts, Custom Links, and Categories.

Normally, when creating a menu, webmasters won’t add posts but pages, categories or even custom links. In this example, I will add pages.

Press the Pages option (if it isn’t shown by default), and you will see three tabs. More Recent that will show the last edited pages. View All that will show all your pages, and Search that allows you to search a specific page.

For this example, I will press the View All options to display all existing pages and select Home, Blog, and About.

Select the pages you want to be added to your menu and press the Add to Menu button (lower arrow in the screenshot below).

As you can see, all the items I added now are shown in the Menu Structure section.

Next, I will add some categories from the left menu, and after selecting them. I will press the Add to Menu button again.

As you can see, categories were added.

Now, I want to define these categories as a dropdown menu, and defining the Blog option as the parent menu item. To do it, we need to drag items as explained in the following steps.

The arrow in the following screenshot shows how I drag down the Blog item, locating it precisely above the Business category:

As you can see in the following image, the order of items was changed:

Next, I want to create a submenu where Blog is the main item, Business is the child item or submenu, and Technology is the child item of Business.

To do it, just drag the Business item below Blog to the right, as shown by the upper arrow. Then drag the Technology option below Business to the right of Business. This will sort the dropdown menu and submenus like stairs, as shown below:

Once you added and sorted all sections, scroll down to the Menu Settings section and select the place where you want to locate your menu.

In my case, I will set the menu as primary. Check the location box you want. Then, press the Save Menu button to apply changes.

As you can see below, I have a primary menu with sections Home, About, and Blog, where Blog contains a dropdown menu including Business, and Business has an additional dropdown menu including Technology. Of course, you can add as many items as you want.

Adding a Navigation Menu in WordPress From the Customization Screen:

You also can manage or create WordPress menus from the customization screen, which you can access from the dashboard by moving your mouse pointer over Appearance and pressing the Customize option as shown in the screenshot below (Appearance>Customize):

In the customization screen, there is a left menu. Find and press the Menus option as shown in the following image:

After pressing the Menus option, you will see all existing menus.

In the following example, the menu defined as primary is named “Type menu name here”, which I created in the previous section of this tutorial. I want to remove or disable it to create a new one.

Press the menu you want to edit or, in this case, remove as shown below:

You can disable the existing menu by deselecting it as shown by the upper arrow in the image below, or you can remove it by clicking Delete Menu as shown by the lower arrow. Use the option you want.

Once you remove or hide the menu you want to replace, create a new one by clicking the Create New Menu button.

Type the menu name where the upper arrow is, select the menu location where the middle arrow, and press the Next button as shown by the lower arrow:

Once the menu is created, you need to add items. Press the Add Items button.

A new menu will appear on the right side, including all items you can add. In the Pages section, you will see your existing pages to choose the ones you want to add.

In the example below, I will add pages: Home, Blog, and Sample Page.

To add an item, just press it, and it will be added to the menu.

As you can see, the chosen items are shown in the left menu. You can press the X to remove them.

Now, I will add some categories. To do it, press Categories or any other type of item you want to add.

When you press any item type, it will display all items and, in this case, all categories. You can see this in the example provided below:

As shown in the example below, I added the Business and Technology categories:

Below, you can see the order of the items was changed, and the blog appears above the added categories. You can sort items by dragging them to the position you want.

You also can see Blog, Business and Technology were dragged to the right side. You can drag items to the right to define them as child items creating submenus.

In the following example, Blog is a child item of the Sample Page parent item, while Business and Technology will be child items or a submenu of the Blog parent item:

Once you finish customizing your menu, press the Publish button to apply changes.

As you can see below, two main items are HOME and SAMPLE PAGE, while Blog is a child item of SAMPLE PAGE and Business and Technology are child items of Blog.

That’s how you add a menu from the customization screen.

How to Add a Navigation Menu in WordPress Widgets:

This section explains how to add a menu in WordPress widgets.

To begin, from the dashboard, move your mouse cursor over Appearance and press Widgets (Appearance>Widgets).

If this is the first time you access Widgets settings, you will see the following window. Close it by pressing the X. If you don’t see the window, keep reading below:

You will see all your widgets areas. Probably by default, some will be displayed. You can minimize them to see all available widget areas. In this case, I will add the menu in the sidebar widget.

Scroll down the widget area in which you want to add the menu and press the + (Plus) symbol as shown below:

The following window will show up in the search field type “menu”, and when Navigation Menu shows up, press it.

The menu section will be added. You need to type the menu name and select the desired menu to be displayed in the chosen widget. Then press the Update button to apply changes.

That’s how you add menus to widget areas.

Conclusion:

As you can see, WordPress allows you to add navigation menus using different methods. Adding menus is simple and can be done by any WordPress user level. You just need to follow the steps described above. This tutorial is used as an example of primary menus, but you also can add top menus or menus in footers (using the widget areas as explained in the last section). WordPress also allows you to use plugins to manage menus, which is not convenient since adding unnecessary plugins may negatively affect your site performance.

Thank you for reading this WordPress tutorial explaining how to add navigation menus. Keep following Linux Hint for more professional articles.

About the author

David Adams

David Adams is a System Admin and writer that is focused on open source technologies, security software, and computer systems.