How to Use and Create Navigation Menus
Table of contents:
– What's a navigation menu?
– Creating a menu
– How to add pages to your custom menu
– How to add blog post category archive pages to your custom menu
– Adding custom links to your menu
– How to create a dropdown/sub-menu in your menu
– Creating a "dead link"
– Display the Menu by Selecting a Menu Location
– Kadence child theme 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 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 blog post category archive pages to your custom menu
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 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.
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 its display location!
Depending on your theme, your locations might look different than mine in the image 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.
Most of the time, the names of the menu locations will tell you where the menu will display. So using the screenshot below as an example, if I check the box for Above Header, the menu is going to display above the header. If I check the box for Right, it's going to display on the right side of the header, etc.
If you have created multiple menus, just remember you can only have 1 menu per 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!
Kadence child theme menus
Kadence child theme menus work just like normal menus! But there are 2 special menu locations I want to go over:
1. "Mobile" menu location - when you set a menu to the Mobile location, it will show up on mobile only.