How to Make a Drop-Down Menu in WordPress

Drop-down menus in WordPress are crucial for your website’s navigation. They boost UX (User eXperience), and as a result, reduce your website’s bounce rate. Granted, if you go overboard with the number of sub-items, your top-level page visits take a nosedive. An ideal number is below or at 7 – studies show that our short-term memory holds around 7 items. We also suggest putting the most important menu items at the first and last spot, because of how our attention and retention work. With that, let’s get into how to make a drop-down menu in WordPress.

You can’t make a drop-down menu via WordPress plugins or themes (in most cases)

You’d think the most user-friendly way of creating drop-down menus includes the installed and active WordPress theme or the WordPress page builder plugin. They both use a Live Preview to help with editing post and page elements, in this case, drop-down menu items. Notice how we didn’t mention adding? That’s because, in nearly all cases, you still have to add a menu using the method below. Both the theme or builder plugin can usually only load and customize pre-existing menus. The same applies to installing a dedicated WordPress plugin. The menu plugins for WordPress still require you to add a menu manually, then tick a box/click on Enable to turn on plugin functionality for extra options. We’ll cover these methods separately when we demonstrate how editing a menu works.

Make a drop-down menu within WordPress

Now that you know where not to waste your time, here’s where to invest it. This method requires your active WordPress theme to supports menus, which most do. Here are 2 ways to make a drop-down WordPress menu:

1. Using the Menus section

This method is less beginner-friendly since it doesn’t display real-time results or provides visual cues. As such, it’s common for users to realize something doesn’t look or fit right only when you publish the menu. Nonetheless, it’s crucial to master it if you plan on customizing your menus via your theme, page builder, or dedicated plugin. With that said, follow these steps to make a drop-down menu in WordPress:

1. Create a new menu

If your website frontend already has any sort of top menu, choose to either add drop-down menu items to it or create a brand new one. If you decide to do the former, choose the menu in the “Select a menu to edit:” drop-down list above the link in step 3. Otherwise, do the following:

1. Access your WordPress Admin Section.
2. In the sidebar on the left, click on Menus under “Appearance”.
3. Click on the create a new menu link in the top left corner.
4. Enter the name for your menu in the text field next to “Menu Name”.
5. Note. This name won’t be visible publicly, only on the back-end.
6. Click on the Create Menu button.
7. Add top-level menu items by putting a checkmark in front of Pages, Posts, and Categories on the left side, under “Add menu items”.
8. Note. You can also add Custom Links to manually enter the item name and URL. This is pivotal for one-page websites that use anchor links in WordPress.
9. Click on the Add to Menu button.

2. Add and configure sub-items to the menu

Now’s the time to ad sub-items, e.g., the items displayed inside the drop-down menu. Follow these instructions to create a drop-down menu in WordPress:

1. Choose the sub-item under the Categories on the left-hand side. Alternatively, click on Custom Links.
2. When finished, click on the Add to Menu button.
3. Click on the newly added item, and drag it below the menu item you want it to appear under.
4. Click to pick up the item again, then drag it slightly to the right, so that the “Category” or “Custom Link” description gains a “sub-item” in front.
5. Repeat the process for other drop-down items. Change their position in the menu by clicking and dragging.
6. Click on the Save Menu button in the top right corner.
7. Note. You can also create a multi-level drop-down menu, e.g., make a sub-item have its own sub-item by repeating steps 3 and 4.

3. Publish your menu

If you edit an existing menu, the changes will be visible on the front-end immediately. Otherwise, you must publish your menu as you would a post or a page. Do this to publish a drop-down menu in WordPress:

1. Locate the “Menu Settings” section below the list of menu items and sub-items on the right side.
2. Under “Display location”, put a checkmark in front of Primary Menu, Top Menu, Primary, Header Menu, or however your theme defines its position.
3. Don’t put a checkmark in front of Automatically add new top-level pages to this menu since this will rapidly clutter your menu.

2. Using WordPress Customizer

This method is extremely similar but uses a slightly different interface. It allows you to see changes in real-time since your page is visible on the larger portion of the screen. Here’s how that works:

1. Open Live Preview

You can launch Live Preview in one of these 2 ways:

1. In the Menus section under “Appearance”, click on the Manage with Live Preview button in the top left corner.
2. Click on Customize under “Appearance”. Find the Menus tab on the left-hand side.

2. Add and rearrange menu items and sub-items

Here’s how the procedure looks now:

1. Click on the Create New Menu button, enter a menu name, and click on Next.
2. Click on Add items, then start adding menu items and sub-items like above. As expected, you can click to edit or drag to reposition items.
3. Every change you make is immediately reflected on the page preview on the right side.
4. Select the position under “Menu Location” as suggested in method 1, step 3, sub-step 2.
5. Click on Publish in the top right corner of the Customizer interface.