How to Create a Dropdown Menu in WordPress (Beginners Guide)

Do you want to create a dropdown menu in WordPress?

A dropdown menu shows a list of links when you hover your mouse over an item on the menu. It’s a great way to show lots of menu options in a small space, and helps visitors find what they’re looking for by organizing your content into categories and sub-categories.

In this beginner’s guide, we will show you how to create a dropdown menu in WordPress.

Why Use Dropdown Menus in WordPress?

WordPress comes with a built-in menu management system that allows you to easily add navigation menus to your WordPress site.

Navigation menus are links to your website’s most important pages, and usually appear in a row next to your website’s logo.

If you’re starting a WordPress blog or creating a website with only a few pages, then it may make sense to add your pages as a single row. This allows visitors to see all your important pages at a glance.

However, if you run an online store or a large website, then you may want to add lots of links to the navigation menu. This can be overwhelming for visitors, and can make your website look messy and complicated.

Dropdown menus solve this problem by only showing menu links when a visitor hovers their mouse over the parent item. They also allow you to organize your content into topics, categories, or groups. This can help visitors quickly find what they’re looking for, even when your site has hundreds or even thousands of pages.

Lastly, they look pretty nice too.

That being said, let’s take a look at how you can easily create WordPress dropdown menus and add them to your website.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Step 1. Choosing a Theme with Dropdown Menu Support

WordPress comes with a built-in menu management system but how these menus look will vary depending on your WordPress theme.

Almost all WordPress themes support dropdown menus by default. However, some themes may not have proper dropdown support.

To start, you need to make sure you’re using a theme that supports dropdown menus.

How do you know if your theme supports dropdown navigation?

If you downloaded the theme from the official WordPress repository, then simply visit that theme’s page and click on the ‘Preview’ button to see a live demo.

You can then check if the demo is showing a dropdown menu in its navigation menu.

If you’re using a premium WordPress theme, then the developer may have a live demo on their website. You can also check the theme’s documentation for more information.

If you’re still unsure, then you can always ask the developer for help. For more on this topic, please see our guide on how to properly ask for WordPress support and get it.

If your WordPress theme doesn’t support dropdown menus, then you’ll need to find a theme that does. For plenty of tips, see our guide on how to choose the perfect WordPress theme.

To help you out, here are a few excellent themes that support dropdowns out of the box.

• Astra – A multipurpose WordPress theme that comes with several starter sites and tons of features.
• StudioPress themes – Built on top of the genesis theme framework, these professional themes are highly optimized for performance.
• OceanWP – A popular WordPress theme that’s suitable for all kind of websites.
• Ultra – Powered by Themify builder, this drag and drop WordPress theme comes with beautiful templates and flexible theme options.
• Divi – A popular theme by Elegant Themes that uses the Divi page builder and comes with tons of drag and drop features including dropdown menus.

That being said, let’s take a look at how to create a dropdown WordPress menu.

Step 1. Creating a Navigation Menu in WordPress

If you’ve already set up a navigation menu on your website, then you can skip to the next step.

Let’s create a simple menu first.

Go to Appearance » Menus in the WordPress dashboard and click on the ‘Create a new menu’ link at the top.

Next, you need to type in a name for the navigation menu.

This is just for your reference so you can use anything that helps you identify the menu inside the WordPress admin area.

After typing a title into the ‘Menu Name’ field, go ahead and click on ‘Create Menu.’ WordPress will now create a new empty menu for you.

Let’s start by adding the top links to the navigation menu. These items will appear in the top row of your dropdown menu.

In the left-hand column, simply check the box next to each page you want to add. Then, click on the ‘Add to Menu’ button.

Those pages will now appear in the right-hand column under ‘Menu structure.’

You can also select blog posts, categories, or add custom links. For more detailed instructions, please see our guide on how to add a navigation menu in WordPress.

Step 2. Adding Sub-Items to a Menu

Next, we need to add sub-items that will appear inside the dropdown menu. You can add a sub-item under any of the existing menu items.

In this guide, we’ll show you how to add subject categories under a ‘Blog’ menu item.

In the left-hand column, simply select all the pages that you want to add as sub-items and then click on the ‘Add to Menu’ button. Your items will now appear in the right-hand column.

However, by default these links all appear as regular menu items, which means they’ll be added to the top row of the dropdown menu.

We need to make them sub-items of a parent instead.

To do this, drag and drop a menu item and place it under the desired parent. Then, simply move it slightly to the right, and it will become a sub-item.

Now, just repeat this process for every sub-item that you want to show in the dropdown.

When you’re happy with how the menu is setup, don’t forget to click on the ‘Save menu’ button to store your changes.

Step 3. Publish Your Dropdown Menu

If you’re editing a menu that’s already live on your website, then visitors will see your changes straight away.

However, if you’re creating a new menu then you’ll need to choose a location for that menu.

Each WordPress theme defines its own menu locations, which you’ll see in the right-hand column, under ‘Menu settings.’ Simply check the box next to the location that you want to use and then click on ‘Save menu.’

You can now visit your website to see the dropdown menu in action.

Tips on Creating Interactive Dropdown Menus

Navigation menus are important because they’re the first place visitors will look to find interesting content, or specific information.

Using them correctly will help visitors find their way around your website. It will also help you get more conversions and sales, while also increasing your pageviews and reducing your bounce rate.

With that in mind, here are a few tips on creating helpful and user-friendly dropdown menus.

1. Create multi-level dropdown menus

In this guide, we showed you how to create a top row and one set of sub-items. However, you can also add a sub-item below another sub-item to create multi-level dropdown menus.

This can be useful for sites that have lots of content, or lots of content categories.

For example, if you’re using a plugin such as WooCommerce to sell products online, then you might have an ‘Electronics’ category and ‘Laptop’ sub-category. However, you may also have further sub-categories, such as ‘Apple laptops’ or ‘Laptop bags and cases.’

In this case, it may make sense to create a multi-level dropdown. To do this, simply drag any page beneath a sub-item and move it slightly to the right.

2. Create multiple dropdown menus

You can create a dropdown under any top link in your menu. You can even add multiple dropdown menus in your main navigation menu.

Just go ahead and drag the sub-items underneath the different parent items, to create multiple dropdown menus.

This is a great way to show lots of content in a small space.

3. Create menus with a live preview

If creating your dropdown menu in the dashboard gets too complicated, then you can switch to the WordPress customizer. Simply go to Appearance » Customize to launch the live theme customizer.

From here, click on the ‘Menus’ tab and then select the navigation menu. You’ll now see a drag and drop editor in the left-hand column with a live preview of your site in the right panel.

You can now continue working on your menu, and any changes you make will show up in the live preview.

4. Creating a large mega menu as dropdown in WordPress

If you have lots of content, then you may not be able to organize it neatly into a standard dropdown menu.

Instead, you can show the full structure of your website as a mega menu that only appears when users hover on the main menu.

Mega menus do appear as a dropdown menu, but they can show a lot more links, sub-menus, and more. For detailed instructions, see our step by step tutorial on how to create a mega menu in WordPress.

We hope this article helped you learn how to easily create a dropdown menu in WordPress. You may also want to see our guide on how to properly move WordPress from HTTP to HTTPS, or our expert pick of the must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.