Are you struggling with how to add a navigation menu to WordPress?
WordPress actually includes a fairly user friendly interface to help you add menus to WordPress without needing to know any code. But unless you’re already familiar with WordPress, it can still be difficult to dive in and create your first menu.
In this post, I’ll show you everything you need to know to create a detailed, unique navigation menu, just like the one we use here at WPKube:
By the end of this post, you’ll know how to:
Let’s jump right in with how to create your navigation menu!
Before you can start adding links and navigation items to your menu, you need to actually…create a menu! So let’s start at the beginning…
To access the navigation menu interface:
You’re now in the Menus interface. It should prompt you to immediately create a menu. Here’s all you need to do for now:
And that’s it! You just created a menu.
After you create your menu, WordPress will show you a screen that includes, in part, an option called Menu Settings. For this step, you’re specifically interested in the Display location option:
This tells WordPress where to insert your navigation menu on the live version of your site. For example, at WPKube (and most other websites) our main navigation menu is prominently located in our header.
Unfortunately, the names of these locations vary from theme to theme – so the actual locations that you see in the interface might be different than the locations in the screenshot from my example site.
So which location should you choose?
Well, if you want to create a “standard” navigation menu like we use here at WPKube, you’ll usually want to pick the option that includes the word “Primary”. Usually, you’ll see it listed as something like:
Some themes might not include the word “Primary”, which can make things a little tricky. So if you don’t see “Primary” anywhere in the location list, you might also want to try locations like:
Once you find the right menu location, check the box and click Save Menu:
You’re almost done, now! All that’s left to do is actually add the items that will appear on your navigation menu.
This section is going to be the lengthiest in this guide because there’s a lot you can do while adding navigation menu items.
I’ll start by giving you some general guides on how to:
Then, I’ll give you a few tutorials on how to perform specific actions like:
To add an item to your navigation menu, you’ll use the sidebar on the left:
In that sidebar, you should notice that there are different sections for:
Depending on the specific theme and/or plugins that you’re using, you might also see additional sections with menu items that are specific to your site.
Let’s say you want to add a link to your Contact page. All you need to do is:
Once you click Add to Menu, you should see it appear under Menu Structure on the right side of the interface:
By default, WordPress will use the actual name of a post/page/category for the text on the navigation menu.
But if you want to change this, all you need to do is click the Down Arrow icon next to any menu item and you can change its text:
Once you start adding multiple menu items, you might find a need to rearrange them.
To rearrange menu items, all you need to do is drag and drop them into your desired order:
You can also drag a menu item underneath another menu item to create sub-menus:
I’ll dig into how this specific sub-menu functionality works in more depth in a second.
To remove an item from your menu:
Drop-down menus are a fairly common feature on many websites. If you’re not sure what I mean, here’s an example from my test site:
To create such menus, all you need to do is rearrange your menu items so that they sit “inside” a parent menu item like this:
Once you do that, WordPress will mark each item in the drop-down with the sub item label.
You can also create multiple levels of nesting like this:
On the front-end, that would look something like this (the actual design depends on your theme):
Finally, if you’re working with drop-down menus like this, you’ll often run into situations where you don’t want people to be able to click on the parent menu item (that is, the menu item that a user hovers over to open the drop-down menu).
To do that, you need to add a new Custom Links menu item:
Then:
And that’s it! Now, users can hover over this item, but they won’t be able to click on it – only access the drop-down items.
You got a sneak preview of this in the previous section – but let’s dig a bit more into Custom Links.
Custom links are helpful because they let you:
To add a custom link:
In all the examples above, I’ve shown you how to add a navigation menu to WordPress using the dedicated Menus interface.
But WordPress actually includes another way to let you edit menus while seeing your changes in real-time.
While I don’t think it’s the easiest way to create a new menu from scratch, it is helpful for you to preview how your menu items will look on your live site. This helps you ensure that your menu looks good and is easy for visitors to use.
To access it:
As you make changes to your menu, the preview of your site will automatically update to reflect those changes.
Finally, I want to close things out by showing you how you can display a WordPress menu in your sidebar (or any other widgetized area).
Here’s how to do it:
And that’s it! You should see your menu in the relevant widget area:
That finishes up our guide on how to add a navigation menu to WordPress! I hope you found it useful and are able to do everything you need.
But if not – you can always leave a comment and we’ll do our best to help out.
And if you’re interested in more beginner friendly guides like this one, you might want to learn how to install WordPress themes and WordPress plugins.
SeedProd is one of the elders of the WordPress ecosystem. It's also a bit of…
Really Simple Syndication (RSS) feeds are a vital component of the WordPress ecosystem. They act…
It’s that time of year again when people start revving up their shopping lists, hunting…
If you clicked on this post, I’m guessing you want to find the best solution…
Trying to figure out how to start an online course so that you can share…
Considering using Teachable to create an online course? In our hands-on Teachable review, we'll help…
View Comments
Nice article, Really helped me. Keep up the good work!
Hey I created a menu but when you click on 'blog' it doesn't show my latest posts, how do I do that?
My submenu icons are boxes not arrows- how do I get the arrows back?