How to Create a Dropdown Menu in WordPress

Home WordPress How to Create a Dropdown Menu in WordPress

If you’re looking to add a dropdown menu on WordPress, then you’ve come to the right place! 

In this post we’ll be showcasing how you can add a dropdown functionality on WordPress. Hopefully after reading through the article and seeing the screenshots, you will have a better understanding of how you can create a dropdown menu on WordPress. 

So, without further ado, let’s dive right in. 

How to Create a Dropdown Menu on WordPress Core (No Plugin Required) 

The first thing you have to confirm is whether your current theme supports drop-down menus.

We say this because a drop-down functionality is not available on every theme. Oftentimes, you won’t face this problem. But, if you have a theme that doesn’t provide a drop-down or mega menu functionality, you’re going to face hurdles. 

To be on the safe side, you should check the theme’s documentation to confirm drop-down support. 

If the theme supports it, then you can use WordPress to create a drop-down menu in the easiest way possible. 

The method you can use to do that is through creating a drop-down from the default menu option. The benefit of this is that even if you switch themes or add new plugins, the drop-down design remains the same. 

To get started, first head on over the Appearance > Menus from your WordPress dashboard. 

Menus from your WordPress dashboard.

When you open up the Menus panel and it asks you to create a menu, then you need to do that first up. 

Let’s see how you can create a menu. 

Step 1: Menu Creation 

To create a menu on WordPress, all you have to do is enter the name of the menu as show below. Then, click on the Create Menu button. What name you use isn’t as important than the fact that you’ve now created a basic menu. 

Menu Creation

Step 2: Adding Pages to the Menu 

When the basic menu is created, it’s time you add relevant links inside it. 

Adding Pages to the Menu

On the sidebar, you will see a list of the pages you’ve created. To add the relevant links to your WordPress menu, all you have to do is select the checkbox on each of the pages. When you’ve selected the pages you want to add, click on the Add to Menu button to continue. 

There you have it! You have now created a basic menu that you need to alter a bit for to make a proper drop-down menu.

Step 3: Drag and Drop Menu Items 

When you’ve all the pages to your WordPress menu, creating a drop-down menu becomes very easy. 

All you have to do is drag and drop the pages you’ve added inside one another. 

Suppose if you have a page called “Services”, drag your service-related pages inside that section. 

You can mess up a few times with the drag and drop. There is no harm in that. You can organize your pages again if the drop-down layout doesn’t seem right. 

Drag and Drop Menu Items

When you’re finished organizing your pages, click on Save Menu to continue. 

Step 4: Selecting Menu Location

When you’re finished setting up a menu bar, you need to set it on your website. Now, a majority of webmasters display the menu in the header section of their website. But, there are some creatives that display their menus on the sidebar as well. 

If you’re starting out, you can add the drop-down menu in the header section. What we wont’ recommend is adding the drop-down in the footer. It’s a bad practice that you should avoid. 

Within the Menu Settings Panel, you can choose the position where you want to add the drop-down menu. 

There are two things you need to consider for this: 

1. The display location names vary depending on the theme. On one theme, you might have “primary menu”, and on another, you might have “top menu”. In some cases, you even have “Primary” as the display location. 

2. Avoid clicking on the “Automatically add new top-level pages to this menu” checkbox. It can clutter things up fast and can make menu management complex. 

Save your changes now and you’re finished. Now, let’s move on to the next step. 

Live Preview Feature for Creating Menus 

The best part about using WordPress to create a drop-down menu is that it allows you to view the changes made on your menu through the “Live Preview” feature. 

Live Preview Feature for Creating Menus

When you click on this button, you can make changes through the live preview feature present in the WordPress customizer. 

WordPress customizer

Now you might notice that the interface looks different, but, it’s all the same. You should be able to: 

  • Drag and drop menu items to arrange them in your drop-downs. 
  • Change your menu locations.

The prime benefit of this is that you can see a live preview of your drop down in real time. 

Quick Tips for Dropdown Menu Creation 

When you’ve created a drop-down menu, you need to consider the following tips:

  • With the default WordPress menu editor, you can drag and drop WordPress pages with ease. Try your hand at dragging and dropping website items and overtime, you’ll be good to go. 
Dropdown Menu Creation
  • When creating menu items, be sure to organize them properly. You should plan which drop-down should contain which page. This keeps your design organized and presentable. 
  • Speaking of organization, you should keep your design clean. This means that you shouldn’t include too many items in a single drop-down.

Considering these three tips can put you well on your way in creating highly organized and aesthetic drop-down menus. 

Conclusion

In this tutorial, we’ve described the method you can use to add a drop-down menu to your website. 

Go through the instructions step-by-step. When you’re done, you will be on your way towards creating drop-down menus quickly and efficiently. 

The main benefit of using WordPress is that it allows you to customize every aspect of your website with relative ease. Because of this simplicity, there is no reason for you to not add drop-down menus within your design. 

Instead of making things complex, you should focus on introducing simplicity in your design. 

Read Also

Leave a Comment

Your email address will not be published. Required fields are marked *