Share on facebook
Share on twitter
Share on pinterest

4 Easy Steps to Create a Dropdown Menu in WordPress

how to add a drop down menu in wordpress

Menu, Please!

If you’re reading this article, chances are that you’ve decided you need to make a new WordPress menu. When you search online, there are an overwhelming amount of options. Should you use a WordPress menu plugin? What about utilizing a Content Block? There’s no need to worry, since we will go over how to add a drop down menu in WordPress the simplest way possible in this article! 

It’s important to note that certain WordPress themes do not support the native WordPress dropdown. However, most of the commonly used free themes do.

Table of Contents

How to Add a Drop Down Menu in WordPress

In a matter of minutes, you should be able to follow this tutorial to create a functional WordPress drop down menu for your blog!

1) Get to the WordPress Administrative Dashboard

To begin creating our WordPress dropdown menu, first click on the “Appearance” item on the left-hand column as shown:

hover on appearance

Now that you’re on that page, it should look something like the image below. Although it will default to showing you the available themes, note that “Menus” is contained in the WordPress submenu for “Appearance”, as we’ve boxed in red:

click on appearance

2) Start Making the Menu

See, I told you this would be easy! We’re already well on our way to learning how to add a drop down menu in WordPress! As prompted, we’ll need to give our new menu a name, as we boxed in yellow. Feel free to name it whatever you’d like; remember, you can always change the name later! Once you’ve come up with a cool name, click on “Create Menu” as we boxed in red:

click on create menu to create the dropdown menu

3) Populate the Menu

You may be overwhelmed by the page you are now presented with. To be fair, it’s a pretty verbose page, but it means well! This is always the most tedious part of learning how to make a drop down menu in WordPress.

First, we’re going to need to decide on what to include in our menu. This is entirely up to you. One of the most common uses of this form of WordPress navigation is to let users see your “static Pages”. That means stuff like your “FAQs” page, “About Us” page, and other pages that won’t ever change. You may also wish to include a couple of really important blog posts. 

Layout tip: Part of learning how to add a drop down menu in WordPress is learning how to make it look nice. While you may be tempted to just throw in every Post you have, most people aren’t likely to use a WordPress menu with endless WordPress submenus and Posts!

The left-hand portion of the page should look something like this:

add items wordpress
  • Pages – This accordion item is where all of your “static content” is kept. Pages are probably used most often in these types of WordPress menus.
  • Posts – These are all of your Blog Posts. Only include the important ones! Don’t spring for too many.
  • Custom Links – This feature allows you to add external hyperlinks. This is commonly used if you have a list of affiliates you are required to link to, or if you have a list of resources on third-party sites.
  • Categories – This part of learning how to add a drop down menu in WordPress addresses both WordPress Categories and WordPress Subcategories. You can check any or all of these to let users instantly see posts “tagged” or Categorized under any Category.

For example’s sake, I’ll add one of each of these four items to our WordPress Menu! First, I’m going to add a page from a previous tutorial where we experimented with changing colors!

add pages on dropdown menu

Then, I’ll click on the “Add to Menu” button. Next, I will select one Post to add. I’m going to go with my “Hello World!” Post on the Test Server:

add posts on wordpress - how to add a drop down menu in wordpress

Following that, I am going to add a “Custom Link”. Remember, you’ll need the full, external URL to add, as well as the text to display. For my example, I’ll use the display text of “CleverSequence” and the full URL of the site:

add links - website design

Last, I am going to simply add the “Uncategorized” Category (this is the default bucket that posts go into when you don’t categorize them in WordPress):

add categories - how to add a drop down menu in wordpress

Do not click the “Save Menu” button yet! There is still another point we have to discuss before we continue.

4) Set Properties of the Menu

We’ve now conquered the phase of learning how to add a drop down menu in WordPress where we put content into the menu. However, we haven’t yet configured our menu’s settings. We also haven’t gone over what each “menu display” option means (these may vary by theme). After doing all of the parts of the third step, the middle of my Dashboard looks like this:

menu preview how to add a drop down menu in wordpress

Remember, you can feel free to drag and drop the items you’ve added to your custom menu. After all, it’s part of fully learning how to add a drop down menu to WordPress! Once you’ve done that, take a look at the “Menu Settings” portion directly below that.

You are first given the choice whether or not to “Automatically add new top-level pages to this menu”. In short, that is asking whether you wish to drop new Pages that will show up on your Home Page in this menu. This would be useful if we were making a menu for just our top Pages, but for this tutorial, we will leave it unchecked.

The final but crucial part of going through how to add a drop down menu to WordPress is to set the “Display Location” on the “Settings” portion of the page. While you may check multiples, we don’t recommend that you do. It makes for poor aesthetics, and poor aesthetics make for poor visitor retention and a high bounce rate!

Desktop Horizontal Menu is just the classic display you’re used to seeing on the Home Page of any site, with links displayed left-to-right. On the other hand, Desktop Expanded Menu is the fancy way of saying “this is how to add a drop down menu to WordPress!”. The other three items are exactly what they sound like. For reference, “Mobile Menu” will only show up on the mobile version of the theme. “Footer Menu” is just allowing you to duplicate your menu at the bottom of your WordPress site. “Social Menu” is great for letting you spread your site around, as it is optimized for links to Social Media profiles!

So, the bottom of the page should now look like this, and you should now click “Save Menu”

click on save menu - how to add a drop down menu in wordpress

The End Result

We now have a drop down list in a WordPress Page (more specifically, the Index or Home Page). You now also know how to add a drop down menu in WordPress! Let’s summarize the four easy steps we took and then look at what we’ve got:

  1. Log into WordPress Admin Dashboard and click on Appearance->Menus.
  2. Create and name a new Menu.
  3. Populate the Menu with at least one item.
  4. Set the Properties and Settings of the Menu about how and where it’s displayed.

This tutorial just touched on the edge of styling a WordPress menu. While each individual theme dictates the style of each of the types of menus (assuming the theme allows menus to begin with), you can use customized CSS to further style menus. If you aren’t satisfied with your current theme’s offerings, there are plenty of plugins that let you make even more customized menus. These come in handy especially for those using older or “legacy” WordPress themes who wish to keep the themes but still have modern-looking WordPress menus.

Here’s the end result using our own theme after learning how to add a drop down menu in WordPress:

full spectrum of the dropdown menu on the right side

The easiest way to customize dropdowns

With Elementor Pro! A professional tool that speeds up your workflow and design by 100%. Their PRO templates are incredible. 

MORE TO EXPLORE​
Scroll to Top

Today's

Clever Tip