Create Your Dropdown Menu in WordPress

The navigation of your website is critical in assisting your users in getting to where they want to go. A well-designed menu may significantly improve User Experience (UX) while also lowering your bounce rate. A poorly constructed one, on the other hand, can have the opposite effect.

Fortunately, WordPress allows you to construct custom menus that are tailored to your site’s requirements. You may even use native capabilities to create a space-saving WordPress dropdown menu that provides clear instructions to your visitors.

We’ll talk about why website navigation is crucial and how dropdown menus may be very useful in this piece. Then we’ll show you how to make them in WordPress and recommend some useful plugins.

Let’s get started!

Contents Table of Contents
An Introduction to WordPress Navigation and Dropdown Menus
In WordPress, here’s how to make a dropdown menu (In 5 Steps)
Plugins for enhancing dropdown menus in WordPress
WordPress Dropdown Menu Troubleshooting
WordPress Navigation & Dropdown Menus: An Overview
Despite their unassuming appearance, navigation menus are an essential component of any website. They assist users in swiftly locating the most relevant pages for achieving their objectives, as well as providing first-time visitors with an overview of what you have to offer:

an example of a menu
The main navigation menu on the Kinsta website
A well-designed navigation menu is essential for increasing conversions and lowering bounce rates. You’ll have an easier time convincing customers to buy or sign up if they can simply find the pages where your product, email signup form, or other converting content is situated.

Furthermore, if consumers can confidently navigate your site, they will not be forced to leave your sites because they were directed to the incorrect location. Assisting them in getting it right the first time can improve UX while also reducing frustration.

Menus are a built-in feature of WordPress. One or more of these can be shown on any site built with the platform. WordPress themes, on the other hand, play a vital part in the layout and placement of your menu or menus.

As a result, your WordPress menu might take many various shapes. The normal header menu is the most familiar:

an example of a header menu
A common header menu is seen here.
At the bottom of your pages, you can typically include an additional footer menu. It may provide the same information as your main menu or provide somewhat different options:

an example of a footer menu
A footer menu is an example of a menu that appears at the bottom of the page.
The menu overlay is another style that users can open and close at their leisure:

an example of an overlay menu
An overlay menu in action
Alternatively, you could use a sidebar menu like this:

an example of a sidebar menu
A sidebar menu in action
You can also use a dropdown menu, which is often known as a “nested” menu:

an example of a dropdown menu
A dropdown menu in action
This sort of navigation is suitable for a wide range of websites. It won’t hide your content like an overlay menu, but it won’t be as distracting as a large header bar or sidebar menu.

You can minimize screen space while still giving users a simple way to navigate by hiding some content until it’s needed.

How to Create a Dropdown Menu in WordPress (In 5 Steps)
Setting up a dropdown menu for your WordPress site is simple once you’ve decided it’s a suitable fit. In only five steps, you can develop a unique navigation system that meets your needs utilizing WordPress’ inherent menu capabilities.

Create your menu items in the first step.
Choosing what to include in a menu is the first stage in the process. To begin, go to your WordPress dashboard and go to Appearance > Menus:

WordPress navigation menu
Using the WordPress dashboard to access the menu editor
Depending on your theme, the menu editor will seem slightly different.

The first option under the Edit Menus tab, however, is what you should pay attention to for the time being. You should notice an opportunity to change one of your current menus as well as a new menu creation option:

The top of the WordPress menu editor has a link to create a new menu.
The top of the WordPress menu editor has a link to create a new menu.
In this case, we’ll go with the second choice and make a new menu. This is done by first entering a title and then selecting the Create Menu option:

Creating and naming a new menu
You may now begin adding menu items to your WordPress site. In most circumstances, it’s better to keep your menu as simple as possible while still providing enough information for consumers to find their way around.

Too many pages might be overwhelming to visitors, making navigation more difficult rather than easier.

You may add your menu items in a couple of different methods. Pages and Posts are the first two, and they work in a similar way.

Page additions to the menu
Simply check the checkboxes for each page or post you wish to add in the menu editor’s sidebar, then click the Add to Menu button:

The next step is to include Custom Links. This entails giving the URL of the website you wish to refer readers to and then giving it a short but meaningful title. After that, click Add to Menu once more:

Adding a menu item with a custom link
Finally, you may have your navigation menu include Page and Post Categories. Users will be sent to an archive page where they may access all of the information related to a specific topic.

This functionality may be very beneficial for blogs and other content-heavy websites:

Adding submenus to the menu
Select the checkboxes of the categories you want to include and choose Add to Menu, just like you did with the Pages and Posts options.

Step 2: Make Your WordPress Menu Organized
When you’ve finished adding all of your menu items, go to Menu Structure in the editor and look at the individual tiles under Menu Structure:

The menu editor’s Menu Structure section
Menu items will appear in the order that you added them at first. You may, however, easily rearrange them by dragging and dropping them into place. This will allow you to design a simple menu without the need of dropdown menus.

Dropdowns may be added to your WordPress menu in a few different ways.

The most straightforward method is to keep dragging and dropping while nesting certain menu items beneath others:

Making a dropdown menu in WordPress
Underneath the Blog page, there are categories that can be nested.
For example, we’ve made the three post categories we added to the menu under Blog “sub-items” in the image above. This will result in a dropdown menu that looks like this on the frontend:

Dropdown menus in WordPress
In WordPress, an example of a dropdown menu.
By adding a Custom Link to your menu, you may create a dropdown menu that includes all of your site’s categories. Use the hashtag “#” as the URL and the label “Categories” or something similar:

Making a menu with a Categories label
After that, you can add all of your categories to the menu and group them together under this label. Each category will have a clickable label, but the label will not be clicked:

The drop-down menu for Categories
You may also hide all of your menu items in a single dropdown menu using a similar strategy.

Create a new Custom Link using the URL “#” and the label “Menu.” Then, behind it, nest all of your other menu items:

All of the navigation links are grouped together under a single Menu label.
On the frontend, you’ll see a dropdown menu with your site’s most important pages.

Any content nested within a sub-item will appear in a sub-menu, as shown in the Categories item below:

Do you want to discover how we grew our traffic by over 1000%?
Join the 20,000+ people who receive our weekly email with WordPress insider secrets!

Now is the time to subscribe.

A genuine dropdown navigation menu for WordPress
You may design any type and mix of WordPress dropdown menus by utilizing the drag-and-drop menu editor in this manner. However, keep in mind that too many menu options can be confusing to users.

To avoid over cluttering your navigation, it’s also a good idea to keep the amount of sub-menus to a minimum.

Step 3: Adding Images to Your WordPress Menu
If your dropdown menu appears exactly like you envisaged it by the conclusion of Step 2, you may skip to Step 5 and publish it. However, if you want to add customizations to your menu, there are a few more steps you may do.

Incorporating visual components into your menus is one strategy to consider for providing further information to visitors. While detailed labels are important, an image or an icon can sometimes help users discern where a navigation link leads more quickly.

Images can be added using custom CSS, which we’ll go over momentarily. However, we suggest installing a plugin like Menu Image, Icons Made Easy:

Images next to the navigation links in a WordPress dropdown menu
Images in a WordPress dropdown menu
This way, you won’t have to worry about using any code to make your dropdown menu more visually appealing.

Return to Appearance > Menus: after installing the plugin.

In the menu editor, go to the Menu Image section.
You’ll see that each page you’ve placed in your menu now has image options. Each page’s photo, size, and position can be customized. When you’re finished, remember to save your modifications.

Step 4: Customize Your Dropdown Menu using CSS
While it’s not suggested for beginners, intermediate and advanced users may want to customize their WordPress dropdown menus with their own layout. However, before you get started with CSS, you’ll need to give your menu a class.

If you skip this step, your custom CSS may cause issues with your site’s other menus. For example, you could accidentally add styling to your footer menu that was intended just for your main dropdown menu.

Click Screen Options in the top-right corner of the menu editor:

The menu editor’s Screen Options tab
Then select CSS Classes: from the drop-down menu.

In the Screen Options tab, select the CSS Classes tick.
Each page in your menu will now have a CSS Classes field:

In the menu editor, there’s a CSS Classes area.
Any custom code you provide in your stylesheet will only apply to the items in your menu with the class you designate once you add one or more CSS classes to them.

Are you fed up with a sluggish WordPress host? We offer lightning-fast servers and world-class WordPress support 24 hours a day, 7 days a week. Take a look at our plans.

You may now work on your custom styling by going to your stylesheet or the Customizer.

Step 5: Promote Your Menu in High-Traffic Areas
After you’ve constructed your WordPress dropdown menu to match your needs and added any customizations you desire, you’ll be ready to publish it to your site.

Depending on your theme and the menu places it supports, this method may differ slightly. We’re going to use the Twenty Twenty theme for this example.

Scroll down to the Menu Settings area in the menu editor:

The editor’s Menu Settings section
If you want new pages to be added to your menu automatically, tick the first checkbox. This may be beneficial if you’re just getting started with your site and haven’t yet uploaded all of your major pages. However, keep in mind that you don’t want to add too many things to your menu by accident.

A series of checkboxes will appear below this choice, indicating the various sections of your site where your menu can be shown.

The Twenty Twenty theme has several menu options, including a desktop horizontal menu, a desktop expanded menu, a mobile menu, a footer menu, and a social menu.

The menu we’ve constructed in this case is best suited to the Desktop Horizontal Menu placement in the site’s header:

Horizontal Desktop Menu for the Twenty Twenty theme
You might also go to the Manage Locations page in the Menus section of your dashboard. You can see all of the menu locations that your theme supports, as well as whatever menu you’ve allocated to each one, in this section:

The Locations tab is where you can manage your locations.
It’s helpful to visualize how your menus will appear on the frontend while arranging them.

The option to Manage with Live Preview is available.
Using the WordPress Customizer, click the Manage with Live Preview option to see how your menu will appear in the area you’ve chosen:

In the Customizer, you may get a live preview of the WordPress menu.
The Customizer will then allow you to publish your menu or menus. You can simply return to the menu editor and make the appropriate changes if you ever need to add or remove items from your dropdown menu.

Plugins for enhancing dropdown menus in WordPress
Although you may construct completely working WordPress navigation menus without the use of any additional tools, it is occasionally necessary to increase the functionality of your menu. If this is the situation with your site, you might want to consider using one of the many popular WordPress menu plugins.

Dropdown menus on content-heavy blogs can be easily created using nested pages. While this plugin is primarily used to organize posts and pages, it will also automatically produce a menu that mimics the structure of your content:

pages that are nested
WordPress plugin for nested pages
While it’s not always a good idea to include a huge number of things on your menus, it’s occasionally inevitable.

If this is the case with your site, Max Mega Menu can assist you in combining your existing WordPress menus into a single “mega menu”:

maximum megamenu
WordPress plugin Max Mega Menu
With the advent of mobile surfing, it’s critical to ensure that your menus are still readable on mobile devices.

WP Mobile Menu works with any responsive theme to help you establish a mobile-friendly navigation system for your site’s visitors:

wordpress mobile menu
WP Mobile Menus is a WordPress plugin that allows you to create mobile menus.
Finally, as we’ve already discussed, detailed menu items may not be sufficient in some cases. In these cases, you might want to consider using Menu Image, Icons Made Easy, as we discussed in Step 3 above.

You can use any of these plugins to improve your present navigation system and increase the effectiveness of your WordPress dropdown menu. Just keep in mind that when it comes to navigation, sometimes simpler is better. Only add more features if they will improve your UX and keep your site from becoming cluttered.

WordPress Dropdown Menu Troubleshooting
There are various reasons why your menu’s dropdown feature isn’t working once you’ve configured it as explained above.

While we won’t be able to cover all of them here, we can assist you in narrowing down the source of your problem so that you can find the right solution.

Conflicting code between your custom menu and your theme is often the cause of a broken menu. If your menu isn’t working, the first thing you should do is switch to a default theme like Twenty Twenty. If your menu starts working again, you know the problem is with your theme. The developer of your theme can then be contacted to find a solution.

Other potential causes include:

Check that any custom CSS you’ve included is valid, and that you’re utilizing CSS classes as stated in Step 4.
Incompatibility with plugins: To test if this fixes the problem, disable any menu-related plugins you’ve installed.
jQuery is no longer supported. Try reopening the dropdown menu after updating to the newest version of jQuery.
However, as previously stated, there are various possible causes for your incorrect menu. If none of the above alternatives appear to be working, we recommend contacting the WordPress Support Forums, contacting our skilled Kinsta WordPress Support Team, or hiring a WordPress developer to address the problem for you.

The UX of your site relies heavily on navigation menus. But what if you have a lot of menu items to highlight? The name of the game is the dropdown menu! With this instruction, you can see how simple it is to make one.
TO TWEET, CLICK HERE
Summary
While it may appear to be a little detail, the navigation of your WordPress site may make or break its success. Dropdown menus save space on visitors’ displays while also allowing them to navigate your site more simply and increasing conversions.

Save time, money, and improve site performance by using:

Expert WordPress hosting assistance is available 24 hours a day, 7 days a week.
Integration with Cloudflare Enterprise.
With 29 data centers across the world, we can reach a global audience.
With our built-in Application Performance Monitoring, you can improve your performance.
All of this and more is included in a single plan that includes no long-term obligations, aided migrations, and a 30-day money-back guarantee. Check out our plans or speak with a sales representative to find the ideal plan for you.