Do you want to create a dropdown menu in WordPress?
A dropdown menu shows a list of links when you hover your mouse over a menu item. It’s a great way to show lots of options in a small space and helps visitors find what they are 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 create your menu 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 find what they are looking for, even when your site has hundreds or even thousands of pages.
That being said, let’s take a look at how you can easily create WordPress dropdown menus and then add them to your website.
If you don’t like the video or need more instructions, then just 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 includes a dropdown menu.
If you are 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. You can also see our ultimate guide on how to properly change a WordPress theme.
To help you out, here are a few excellent themes that support dropdown menus:
- 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 should help your website to load more quickly.
- OceanWP – A popular WordPress theme that’s suitable for all kinds 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 2: Creating a Navigation Menu in WordPress
Let’s start by creating a simple menu.
If you’ve already set up a navigation menu on your website, then you can skip to the next step.
To get started, go to Appearance » Menus in the WordPress dashboard and click on the ‘Create a new menu’ link at the top.
Note: If you don’t see the Appearance » Menus option on your site and see only Appearance » Editor, then that means your theme has Full Site Editing (FSE) enabled. In that case, you can skip ahead to the FSE section below.
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.
Next, you’ll need to add the top links to the navigation menu. These are the items that will appear in the top row of your dropdown menu and will act as parents to all the other posts and pages.
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 3: 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, but the steps will be similar no matter what content you add.
In the left-hand column, simply select all the pages 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 will be added to the top row.
We need to make them sub-items of a parent instead.
To do this, simply drag and drop a menu item and place it under the desired parent. Then, just 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 are happy with how the menu is set up, don’t forget to click on the ‘Save menu’ button to store your changes.
Step 4: Publish Your Dropdown Menu
If you are editing a menu that’s already live on your website, then visitors will see your changes straight away.
However, if you are 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.
How to Create a Dropdown Menu Using the Full-Site Editor
To get started, just go to Themes » Editor in the WordPress dashboard.
By default, the full-site editor will show your theme’s home template.
To add a dropdown menu to a different part of your website, click on either ‘Templates’ or ‘Template Parts.’
For example, if you are creating a main navigation menu, then you will typically want to add it to the header template part.
The editor will now show a list of all the layouts that make up your WordPress theme.
Simply click on the template or template part where you want to add the dropdown menu.
WordPress will now show a preview of the template.
To edit this template, go ahead and click on the small pencil icon.
With that done, click on the blue ‘+’ icon in the top left corner.
In the search bar that appears, type in ‘Navigation.’
When the right block appears, drag and drop it onto your design.
Now, simply click to select that block, and you will see all the different settings you can use to customize the navigation block.
For instance, you can change the layout, edit the display settings, change the color of the text and background, and adjust the font size.
To add the top-level pages to your menu, simply click on the ‘+’ button.
Then, select ‘Page Link.’
In the popup that appears, start typing in the title or URL of the page you want to add.
When the right page shows up, click to add it to the menu.
Simply repeat this process to add all the top-level items to the dropdown menu.
With that done, you can add a submenu to any parent item.
In the right-hand menu, click on the dotted icon next to the parent item. Then, select ‘Add submenu link.’
In the popup that appears, type in the title or the URL of the page that you want to show in the dropdown menu.
When the right page shows up, click to add it as a submenu item.
Now, simply repeat these steps for all the items you want to show in the dropdown menu.
When you are happy with how the menu is set up, click on ‘Save’ to store your changes.
Now, if you visit your website, you will see the dropdown menu in action.
Tips for Creating Interactive Dropdown Menus
Navigation menus are important because they are 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 many different content categories.
For example, if you are 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 for your online store. 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 as many dropdown menus as you want and then show them on different areas of your website.
For example, if you run an online marketplace, then you might create a dropdown menu showing only product categories.
This is great for your product pages, but you may also want to create a unique dropdown menu for your homepage, so shoppers can find different areas of your site, such as the contact form and blog.
Simply create a new dropdown menu following the same process described above, and then use the ‘Location’ settings to control where this dropdown appears on your website.
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 work on your menu, and any changes you make will show up in the live preview.
4. Creating a Large Mega Menu as a Dropdown in WordPress
If you have lots of content, then you might struggle to organize it neatly using a standard dropdown menu.
Instead, you can show the full structure of your website as a mega menu that only appears when users hover over the main menu.
Mega menus are similar to a dropdown menu, but they can show a lot more links, sub-menus, and other items. 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 picks for the must-have WordPress plugins for business websites.