Adding a dropdown menu to your WordPress site is a great way to organize content. This can also add some more room to your header if you have many links.
In this tutorial I’ll show you step by step how to create a dropdown menu for your site.
Creating The Menu
After you’ve logged into your WordPress site hover your cursor over Appearance in the left navigation then click on Menus.
This will take you to the Menu page.
If you already have a menu made your page will look slightly different than this. I’m working on a blank demo site so I will create a menu from scratch.
In the Menu Structure panel enter a name for your new menu. This is only for your reference, it will not appear on your site.
Now click the blue Create Menu button on the right side of the panel.
Adding Links To The Menu
Now in the left panel, under Add menu items, click on the check boxes next to the page you want to add to your menu. Then click the Add to Menu button.
By default the most recent pages are listed. You can click on the View All tab or the Search tab to locate pages that are not in the Most Recent list.
You can also add links to Posts and Post Categories by expanding those items in the panel and selecting the items you want to add.
To Add a Custom Link open that panel and enter the URL you want the link to go to and the Link Text then click the Add to Menu button. We’ll use that feature in just a few moments.
Organizing Your Menu
Now back in the Menu structure you will see a list of all the links you’ve added to your menu. They are probably not in the order you want them to appear. The link at the top of the list will appear first in the menu and the rest will follow in order.
If you hover over a menu item you will see your cursor change to the 4 arrows icon indicating you can move that item. Click and drag whichever item you want to be first to the top position in the list.
A dashed line will appear showing you where you can place the link you’re moving.
Continue moving all the links you want in the primary navigation to the top of the list making sure they all line up on the left.
Creating Dropdown Menu Items
To make a link item a dropdown, also called submenu, item we want to drag it under the menu item we want to be the parent item and make sure it’s indented. A dashed outline will appear indented when you are close to the right spot to drop the item.
Continue to move your menu item until you have all your links in order and the dropdown menu items are indented under the correct parent item.
Note: It is possible to nest a few levels deep and have sub menu items for sub menu items but not all themes support this well.
Be sure to click the blue Save Menu button when you are done editing the menu.
Assigning The Menu To A Location
We’ve created the menu but we’ve not told WordPress where we want to to appear on our site. Let’s do that now.
Click on the Manage locations tab near the top of the page.
Each theme has different locations you can assign menus to. I’m using the default 2020 theme and these are my options.
Find the location you want to assign the menu you just created and click the dropdown that says Select a Menu. Change that dropdown to the name that you gave your menu then click the blue Save Changes button.
Testing The Menu
You can now go to your website and in the location where you assigned your menu you should find that your dropdown menu is working as expected.
Using Custom Links To Make Primary Menu Items
In the example above we have a Services page that we can put menu items under. But what if you don’t want a parent page and just want submenu items? We can use a Custom Link for that.
Back in the Admin section on the Menu page open the Custom Links panel.
In the URL field type in a number sign (#)
In the Link Text field enter what you want the menu item to say, in this case Services.
Now click the Add to Menu button.
In the menu structure panel our new link appears and notice it says Custom Link, instead of Page.
We can now reorder our menu using that custom link as the parent page of the dropdown menu items.
Save your changes by clicking the blue Save Menu button.
Go back to the front end of your site and refresh the page.
The menu will look the same but if you click on the Custom Link parent item you won’t be taken anyplace.
Following these steps you can make simple or complex menus and assign them to any predefined location that your theme supports.