How to Use and Create Navigation Menus

What's a navigation menu?

A nav menu/navigation menu guides your site visitors to the pages and content you have on your website. You can add pages, posts, custom links, categories, shop links, and other content types to your nav menu, as well as customize where you want your menu(s) to display.

Creating navigation menus may sound a bit complicated, but it's actually very simple! It’s important to have intuitive & organized menus that ease your visitor's way to find what they need on your website. Just like your post Categories, you'll want to organize and structure your menu items thoroughly because a menu should work like a map for your site. It should easily guide your visitors to the content they’re looking for.

You can have as many menus as you want & can add as many items to each menu as you want.

Creating a menu

Let's dive in and create your first custom menu. I'll walk you through the steps!

From your dashboard, head to Appearance > Menus to open the Menus screen. You could also go to Appearance > Customize > Menus to see your changes live, but most of the time I prefer to be on the Menus screen because it's easier to navigate and you have more room to organize.

You'll see the Menus page is divided into two columns. In the left column, you have: pages, posts, custom links and categories areas. Depending on your theme and plugins, you may have some additional menu item areas (i.e. you will have Portfolio areas if you're using the Honeydew theme or if you have a portfolio post type plugin). The column on the right is your menu structure where you can add, adjust and arrange your menu items.

Don't worry about the Menu Settings just yet, I'll explain that later down the page.

Near the top, click the Create a New Menu link.

Now, right underneath Menu Structure, next to Menu Name, give your menu a name and then click the "Create Menu" button on the bottom right. Yay! You've created your first menu! Now you're ready to start adding menu items to your new menu.

How to add pages to your custom menu

Click here to learn more about Pages and how to create them.

Click on Pages to open up your items if it isn't open already. To add the pages to your nav menu, check the pages in the left column that you want to add, and then click the Add to Menu button. If you don't see all of your pages in the list, click the View All tab.

The pages you added will appear in the right column under Menu Structure.

How to add categories to your custom menu

Click here to learn more about categories and how to create them.

Click on Categories in the left column. Click the View All tab to see a list of all of your categories. To add the categories to your nav menu, check the categories in the left column that you want to add, and then click the Add to Menu button.

Adding custom links to your menu

Custom links are useful for those cases where you want to link to a page that is separate from your website. For example, maybe you want to add a link to one of your Spotify playlists. This can be done with the custom link option.

Click the Custom Link tab in the left column to open it up. You will see two fields here. The first field is for the URL, where you will need to add the URL of the page you want to link. The second field is the Link Text and is the text that will display in the menu on your live site.

How to create a dropdown/sub-menu in your menu

A dropdown menu is a sub menu that appears below the parent menu item when you hover over it. Using dropdown menus will simplify and help categorize your navigation menus. Here's an example of a dropdown menu when you hover over "Blog":

To create a dropdown in your menu, simply drag the menu items you want to be in the dropdown slightly over to the right, keeping them underneath the parent link. Any links under the parent link will be in the dropdown.

Creating a "dead link"

You can create a navigation menu item (that has dropdown menu items) without making it an actual working link. You're probably asking yourself, "why would I ever want to add a link to my menu that doesn't work??"

Here's an example: I want to a create a dropdown in my menu for my categories. To make a dropdown/sub menu, you NEED a parent link. So let's call the parent link Categories, and when you hover over the Categories link on the site, it shows a dropdown menu of all of my categories. But, I don't actually want the menu item "Categories," to link to anything. Its only purpose is to show visitors where your category links are, and if they hover over this, it's going to open a sub-menu/dropdown with a list of your post categories.

See it in action: go to the Honeydew theme demo, click on "Page Templates" in the dark green menu. You'll notice that the page doesn't open up. The link doesn't work. But when you hover over it, you'll get a dropdown of the page template examples. 

To create a dead/blank link, click on "Custom Links" in the left column. In the URL field, simply add #. This makes it a dead link that the user can't click on it, but it still allows you to add a sub-menu underneath it.
After you've added the dead link, you can begin adding your categories underneath to create your dropdown.

Display the Menu by Selecting a Menu Location

Now that you've added all of your items to your menu, let's go ahead and display it on your site by selecting it's display location! 

Depending on your theme, your locations might look different than mine below. For example, the Dainty theme has only two locations: primary & secondary. The Primary will display above the header area and the Secondary will display below the header area.

For all other themes, you will see 4 display locations like the screenshot below. The names of the locations will tell you where the menu will display. If I check the box for Above Header, the menu will display above the header. If I check the box for Right, it's going to display on the right side of the header.

If you have created multiple menus, just remember you can only have 1 menu per each display location. It will tell you what menus you have that are currently set to other locations (read the small gray text).

Check the box for the display location you want for your menu and click Save. If you want more than one menu, create another menu and assign the menu to a different location.

Now you can visit your site to see your menu!