Wondering what a WordPress menu is? Or want to have a good looking WordPress menu on your WordPress website? There may be many things you’re curious about in WordPress Menus. 

The first and most important reason to use a menu is for navigation. A menu is an excellent navigator for the visitors of your site. That’s why most WordPress menus are called WordPress Navigation menus as well.

In this step by step guide, we will show you how to design the perfect navigation system. Then we will show you exactly how to set up menus using the intuitive WordPress menu manager – in both the classic main Dashboard and in the Live Customizer.

How to Create the Perfect WordPress Navigation

Are you ready for some menu adventure? Well, eat al carte… This section will look at what makes a great navigation system.

Keep it Simple

Don’t over-complicate your navigation menus by including pages that the user doesn’t necessarily need. Stick to your most important content – the content the user needs to stick around long enough to convert. Link only to your most essential WordPress pages, such as About, Contact, Hire/Product etc., and popular content that helps your cause.

Speaking of keeping things simple, do you need that mega menu on your small personal blog? I don’t think so; mega menus are great, but they’re ideal for mammoth WordPress sites with a billion bytes of content and a trillion products to boot. Could you keep it simple stupid?

Sitemaps Count As Well

A sitemap is considered an essential cog in the perfect navigation system. While helping search engine spiders to crawl your site easily and properly, Sitemaps can also come in handy when a user is lost and encounters the dreaded 404 error page. Think of it as a navigation menu for your entire site published on a special page. Sitemaps aren’t to be feared; they’re simply pages containing links to all your site resources.

The best part is you can easily create sitemaps using plugins such as Google XML Sitemaps or go with a WordPress theme that supports sitemaps inherently. Create a special sitemap page, and ensure you can see a list of all resources on your WordPress site when you load https://www.yousite.com/sitemap/. You can link to your sitemap from the 404 error page or your main menu.

Add Navigation Menus to Multiple Locations

If you were to improve your chances of winning the lottery, you would need to play a couple of times. It has everything to do with the theory of probability. Similarly, to get readers to click your links, you need to show said links a couple of times at different locations on your site. The logic here is simple: the easier the reader can find the links, the faster they can click through.

By default, most WordPress themes will let you display your navigation menu in the header section and perhaps the footer, but that’s it. You can, however, use widgets to display your navigation menus wherever you fancy.

Best menu locations for maximum exposure include the header, sidebar, and footer areas. The sidebar is also a prime spot for categories, archives, and tags, so feel free to take advantage of these features to enhance your navigation system.

Add a Search Form

Systems break at the least opportune times. They tend to give in or fail when you least expect it. Navigation menus are no exception; they fail, especially if you’re using a third-party WordPress menu plugin and tinkering around. At other times, the user doesn’t have the time to go several levels deep in your menus to find information. What to do?

You implement a search form, making it easier for the user to find what they want. Then place it in a prominent location on your WordPress site. For instance, don’t hide it in the footer section that’s only visible when the user scrolls down. If you have infinite scrolling in place, said user might never see the search form.

RELATED BLOGS: READ MORE

A search form is a fail-safe measure and a device that greatly improves user experience. Relevanssi helps you to build amazing search engines for your WordPress-based business.

Main takeaway: At the end of the day, ensure your navigation menus are easy to find and use. Also, put important content first, which is incredibly easy to find.

How to Create a WordPress Menu in the Main Dashboard

Now let’s create a great navigation menu with the helpful WordPress menu manager. Out of the box, WordPress comes with a great menu manager that allows you to create simple menus, including dropdown menus. It’s a simple drag-and-drop manager that adds menus as easy as pie. Even a fifth-grader can add WordPress menus in minutes.

Create a New Menu

How? Just navigate to Appearance > Menus in your WordPress admin area. This will launch the Menus editor screen. If you’ve not yet created a menu or if you click on the “Create a New Menu” link, you should see this screen:

Go ahead, and give your new menu a name. We shall call our example “main menu.” Enter your preferred name, and hit the Create Menu button. This will launch this screen:

As you can see, there are several options available. To the left, you’ll notice a list of your pages, categories, a custom links tab, and perhaps a couple of other features depending on your theme.

You have the Menu Structure area to the right, where you will edit and order your menu items. You also have the Menu Settings area that allows you to choose menu location and an option that lets you add new top-level pages to your menu automatically (though, for most sites, this one can be ignored).

Add Menu Items

To build your menu, all you have to do from here is select your pages, categories, or add custom links from the left panel, and then click the Add to Menu button. Your menu items will appear in the right column in a flash, where you drag and drop them as you fancy.

Why would you want to add categories to your WordPress menu? Using this feature, you can group the lessons into courses if you’ve created posts (e.g. lessons) in different categories (courses). It’s a helpful feature as well if you run a news site. I went ahead and added various categories to my example menu like so:

Let’s also add a few custom links to direct visitors to third-party sites or even our very own sites living on sub-domains. Just navigate to the Custom Links tab.

Add your link in the URL text and the menu name in the Link Text. Then just hit the Add to Menu button. Always include the extension (the https://), or your links won’t work:

Dropdown Menus

So far, we only have a few links in our menu, but if we were to add many links, it could get messy fast. This is where dropdown menus come in handy.

To create a dropdown, add the sub-menu items you’d like to use. We’ve selected a few blog posts and added them to our menu as an example. Then drag the sub-menu item slightly to the right like so:

Dropdowns are a great way to make your menus shorter, cleaner and easier to navigate. You can create more sub-menus under existing sub-menus, creating multi-level dropdown menus.

Note: Depending on your theme, you may have additional dropdown styling options available in the Customizer or your Theme Panel.

Advanced Menu Properties

Did you know that there are hidden menu options? To enable them, click the Screen Options tab at the top right of your screen. Then check the Advanced Menu Properties you’d like to allow:

You’ll find the following options added to menu items once you’ve enabled them.

Link Target: Check this option to add a target=”_blank” to the link, so your menu item opens in a new tab when users click on it.

Title Attribute: Title attributes can add additional information about a link. This is typically most helpful to search engine crawlers but is also visible to users as a tooltip when they hover on your menu item.

CSS Classes: This option can add custom CSS styling to individual menu items. You can code this yourself, but theme developers often might include an extra option or two. For example, our Total WordPress theme includes a custom menu-button class that will make the menu item display as a styled button (great for adding a “Buy Now” “Request a Quote” or similar call to action).

RELATED BLOGS: READ MORE

Link Relationship: This option is a bit advanced, and to explain quickly, it can be used to define how your site is personally related to the link on your menu item. Is it another of your sites? Is it a friend’s site? You can read the official guide if you want to learn more.

Description: Exactly as it sounds, this option allows you to add a more in-depth description to your menu items. Even though this is an option you can easily enable, it will not be displayed unless supported by your theme.

Menu Location

We’re almost there, but we’re not done yet! You still need to assign the location where your menu will be displayed. Beneath the menu builder, you’ll notice a Menu Settings section. This is where you’ll find your Display Location options. Each theme supports a different number of menus so you may have one or many menu locations depending on your theme. You’ll need to assign a menu to each location you plan on using; however, you can assign the same menu to multiple locations or create individual menus for each location (it’s up to you).

Note: Alternatively, you can use the Manage Locations tab to control the location for all of your menus in one place.

To assign a menu to a location, check the box:

When you’re satisfied with your menu, items, and selected location, click the Save Menu button.

When you look at your website on the front end, you’ll see your menu. Because we assigned our menu to the Main/Header, it’s displayed as the main menu on our demo site:

But so far, the classic Dashboard menu editor lets you see the structure of your menus, but you can visualize them. If you want to see your menus in real-time, the Customizer is the right choice.

How to Create a WordPress Menu in the Live Customizer

Instead of using the traditional Menu editor in the main WordPress dashboard, you can create menus with a live preview in the Customizer. Many of the options are the same, but we’ll walk you through each step again to be sure.

To get started, you’ll need to open up the Live Customizer, which is located under Appearance > Customize:

Then click on the Menus tab to be taken to the following screen to customize your menus:

You can see your already created menus (like the “My New Menu” we just created in the traditional menu manager), create new ones or view all menu locations. We’ll click on the Create New Menu link since we’re showing you the ins and outs of creating menus in the Customizer.

Create a New Menu

When creating a new menu in the Customizer, your first steps are to choose a Menu Name and check a box for the Menu Location. As a reminder, available menu locations will depend on your theme. Because we’re using the Total theme, we have several locations available, so we’ll select the “Footer” location since we’ve already created the main menu:

Add Menu Items

After naming and assigning your menu, you can start building. Click the Add Items button to open up the menu builder:

Here you’ll find all the same options to add links as in the traditional menu manager.

To add pages, posts, custom post types, or taxonomies, click the plus + icon next to the item you want to add. It will immediately add the item to your menu and display it on your site’s live preview:

Reminder: We’re creating a Footer menu, so our menu is displayed in the footer. Your menu live preview will be different depending on which menu location you choose. Suppose you’ve selected a mobile menu location. In that case, the menu will only be visible on mobile, so you’ll need to click on the tablet or phone icon at the bottom right of the Live Customizer to preview your mobile menu.

To add a custom link, add your URL and link text and click the Add to Menu button:

Advanced Menu Properties

The menu link Advanced Menu Properties is not visible by default when working in the Live Customizer. To enable them, you’ll need to go back to the main WordPress dashboard menu editor (if you’ve already started building your menu, be sure to Publish your menu first so you don’t lose all your hard work), click on the Screen Options tab at the top right of the screen and check the boxes for the options you’d like to enable. Then when you head back to the live Customizer > Menus, open your menu and click on the arrow next to the menu item; you’ll find all of the Advanced Menu Properties you’ve enabled:

Dropdown Menus

You can create a dropdown once you’ve added menu items you might want to your menu. You’ll need submenu items for a dropdown, so add your links to your menu, then click and drag them to the right. This will create your dropdown:

Menu Live Preview

You’ve probably already noticed as you were building, but the live preview to the right of the Customizer menu updates in real-time as you make changes. So as you add menu items, add dropdowns, change the location, etc., it will be reflected in the live preview. Here is what our footer menu currently looks like:

If you’re happy with your menu, be sure to Publish it before exiting the live Customizer. After publishing, your menu will be visible on the front of your website:

As you can see – it looks just like the preview. No surprises here!

Final Thoughts

WordPress navigation menus are a vital part of your WordPress site. They guide your users, allowing them to find the content they’re after. They’re great for improving user experience and your conversion rates. The best part is that they’re quite easy to implement, so nothing holds you back.

And if you want to create a truly special menu, give one of these best WordPress menu plugins a try. They’re a quick and easy way to build or improve your existing WordPress menus.

Don’t leave money on the table anymore; invest in a WordPress menu plugin that suits your business needs. Have questions or comments? Share in the comment section below!

HOW TO CREATE A WORDPRESS MENU | DON’T FORGET TO READ OUR LATEST BLOG POST | READ MORE