Beginner's Guide

How to Make a Drop Down Menu in WordPress? 

  • Updated on
How to Make a Drop Down Menu in WordPress

Are you wondering how to make a drop-down menu in WordPress? If that’s the case, then you’ve come to the right place. 

Adding a good navigation feature is important when creating a website. Especially if you have a website with many pages and posts, then proper navigation is crucial. 

Because your visitors should be able to access anything on your website easily. So, creating a drop-down menu is the way to go. 

But how can you create a drop-down menu in WordPress? Don’t worry! In this article, we’ll walk you through all the steps to creating a drop-down menu easily in WordPress. 

Let’s get started!

Creating Drop Down Menu in WordPress – Video Tutorial

Do you prefer a video tutorial instead?

If you a more detailed guide on creating a drop down menu in WordPress, please check our step-by-step guide below.


Why Add Drop Down Menu in WordPress?

Before moving on, you might want to know why to add a drop-down menu on the WordPress website. 

There are many benefits of using a drop-down menu on your website. First, it’ll make navigating your website easier for users. 

For example, if you’re creating an eCommerce website, then a drop-down menu will help to categorize the products and services appropriately.

Benefits of Drop Down Menu in WordPress

Below are some of the benefits of a drop-down menu:

  • You’ll be able to add as many items as you want to your menu. 
  • Easy to add menu items in a small space. 
  • Drop down menu adds an easy navigation experience for your visitors. 
  • Easily manage the items as per the category. 

Now that you know the benefits of a drop-down menu on a WordPress website, you may want to create one. 

So, without further ado, let’s go through the steps. 


How to Make a Drop Down Menu in WordPress?

Able to add a drop-down menu in WordPress is a useful feature that can come in handy for your website visitors. 

Moreover, you can use different methods to create a drop-down menu in WordPress. Let’s look at them in detail. 

1. Creating Drop Down Menu in WordPress Full Site Editing

First of all, we’ll share creating a drop-down menu in WordPress full site editing. It’s the latest site editor offered by default. You can use this editor when using a WordPress block theme. 

Installing Twenty Twenty-Two FSE Theme
Installing Twenty Twenty-Two FSE Theme

Here, we’ll be using the Twenty Twenty-Two theme, which is the first default block-based theme for full-site editing

So, let’s start! 

Step 1. Navigating to Header

To start, go to Appearance > Editor. And, you’ll be prompted towards the editor page. 

Go To Editor Page
Go To Editor Page

You can also go to the editor’s page via customizing or site editing. 

After this, click on the List View option on the top toolbar. Then you’ll see the Header option. You must select the Navigation option to create or manage the menus. It’s nested inside the header depending on the number of groups in the header. 

And if you hover over the Navigation option, it’ll highlight your menu with a blue outline. 

Head To Navigation Block
Head To Navigation Block

Under the Navigation option, you can find the items present in the menu. Here, you’ll see Page List. Also, it’s auto-populated with the published pages. So, if you click on the Edit option, you’ll see a notification saying you’ll need to change the Page List to a Single Link to start editing. 

Convert Page List to Single Link To Start Editing
Convert Page List to Single Link To Start Editing

So click on the Convert option and look at the list view option. You’ll see the Page List option is replaced by the individual page links. 

Converted To Single Page Links
Converted To Single Page Links

Step 2. Create a Menu

The navigation block also allows you to create the menu. Simply click on the Navigation block in the list view and click Select Menu. Following that, click Create a new menu.

Click on Create New Menu
Click on Create New Menu

After that, click on the Start Empty option. A new menu will be added to the list.

Click Start Empty Option to Create a New Menu
Click Start Empty Option to Create a New Menu

Now, click on the “+” to start adding menu items. You can see the process of adding menu items in the image below.

Adding Menu Item
Adding Menu Item

Here, you can see the Preview of all the menu items we’ve added earlier.

Preview of Menu Items
Preview of Menu Items

Click on the desired menu item and click on add submenu option on the toolbar. In the image below, we’ve created a submenu for the Products menu.

Creating a Submenu
Creating a Submenu

You’ll see a “+” icon below the menu item where you can add submenu items.

Adding Submenu Items
Adding Submenu Items

Similarly, you can add submenu items to any menu item. For example, we’re going to add submenu items to the Support menu as well.

Adding the Submenu Items in Support Menu
Adding the Submenu Items in the Support Menu

Click on Save to make all necessary changes. Before clicking the Save button, make sure to check all the boxes of Title, Template Part, and Navigation Menus name before saving.

Saving Drop Down Menu
Saving Drop Down Menu

Step 3: Preview and Publish the Menu

Now, preview any of the existing posts or create one to see the created drop-down menu. You’ll see a drop-down menu as in the examples below. 

Preview of Product Drop Down Menu
Preview of Product Drop Down Menu

Here, we have an example of a drop-down menu for the Products and Support menu.

Preview of Support Drop Down Menu
Preview of Support Drop Down Menu

2. Create Drop Down Menu with a Classic Theme (Kadence)

Creating a drop-down menu is quite different if you’re using a classic theme (non-full site editing theme). 

Prefer the video tutorial instead? Check it out below:

To show that process, here we’re using the free version of the Kadence theme as an example. 

Let’s check how to create a drop-down menu in WordPress using the Kadence theme. 

Step 1: Install and Activate Kadence

First, install and activate the Kadence theme from Appearance > Themes.

To get more insights, check our article on how to install a WordPress theme

Install And Activate Kadence Theme
Install And Activate Kadence Theme

Step 2: Create a Menu

To create a menu, go to Appearance > Menus. After that, give your menu a name and click Create Menu

Name the Menu and Create a Menu
Name the Menu and Create a Menu

Step 3: Add Elements to Your Menu

You can add different menu items like pages, links, posts, and more. For example, you can create secondary navigation for selected pages. Or, you can create an editor’s choice list via a drop-down menu from top-performing blogs.

Select the menu items of your choice and click Add to Menu. Following that, click on the Save Menu button.

Add Menu Items to Your Menu
Add Menu Items to Your Menu

Step 4: Select Menu Location

Click on Manage Locations and assign the location of your menu. Here you can assign menus as Primary, Secondary, Mobile, or Footer menus. 

Primary refers to the main menu at the top of the site, also called the header. Similarly, secondary refers to the menu below the header. Mobile refers to the mobile version of the site, and the footer is the bottom part of the website. Besides, there can be a variety of menu locations depending on your theme.

Click on Save Changes after choosing your desired locations.

Select Menu Location to Add Your Menu
Select Menu Location to Add Your Menu

Step 5: Add CSS to the Menu

To enable custom CSS, click Screen Options and check the CSS Classes. Now, you can create custom CSS drop-down menus. Also, click on Save Menu to save all the changes.

Step 6: Preview and Publish Your Menu

Now, preview any of the existing posts or create one to see the drop-down menu. You’ll see a drop-down menu as in the example below. 

Preview and Publish Your Menu
Preview and Publish Your Menu

Congratulations, you’ve successfully added menus to the website.


3. Create Drop Down Menu in WordPress with a Plugin

This method allows you to create a drop-down menu in WordPress using a plugin. There are many plugins you can choose to create a drop-down menu. Here, we’ll be using the Max Mega Menu plugin. 

Step 1: Install and Activate the Plugin

Before you start, you’ll need to install and activate the plugin. Simply go to your WordPress dashboard and click Plugins

Install and Activate Max Mega Menu Plugin
Install and Activate Max Mega Menu Plugin

After that, click the Add New button and search for the plugin. Following that, Install and Activate, and you’re done.

You can also check our article on how to install a WordPress plugin to get more insights. 

Step 2: Set up Drop-Down Features

After that, you’ll find the Mega Menu plugin on your WordPress dashboard, click on it. 

Now, choose the location in the Menu Location option and click the Assign a Menu option. 

Go to Menu Location and Assign a Menu
Go to Menu Location and Assign a Menu

Following that, you’ll be directed towards a page where you can select a menu on different theme locations. Once you’ve selected the location and menu, click the Save Changes button.

Select the Menu Location and Save Changes
Select the Menu Location and Save Changes

Now go to the Mega Menu option on the Dashboard, and inside the Menu Location, click on the locations you’ve assigned your menus. There, click on the Enable option, this will enable the drop-down functionality to your menus. 

Enable Drop Down Functionality on Your Menu
Enable Drop Down Functionality on Your Menu

Also, your plugin will automatically adapt to your theme style. So, go to the Mega Menu > Menu Theme option if you want to change the menu style, animation, etc. 

There, you can change the theme title, arrow styles, line height, shadow, etc. After making the changes click on the Save Changes button. 

Step 3: Create Drop Down Menu

Now, the final step is to create a drop-down menu. 

To do so, navigate to Appearance > Menus, then add items to your menu using Max Mega Menu functionality enabled. Don’t forget to click on the Save Menu button once you’re done. 

Make Changes to Your Drop Down Menu and Save Changes
Make Changes to Your Drop Down Menu and Save Changes

Now, your drop-down menu is ready to display on the posts and pages of your website. 

Following any of these above methods, you can easily create a drop-down menu on your website’s content. Also, it’ll help to keep your website’s menu bar clean and user-friendly. 


Are you planning to create a site of your own? Then, check our comprehensive guide article on how to make a website from the scratch.

Conclusion

Well, that’s all for now! In this article, we’ve mentioned how to make a drop-down menu in WordPress. We hope that’ll help you know all the methods of creating a drop-down menu in WordPress. 

So if you’ve any queries or suggestions regarding this article, then let us know in the comment below. You can also share your experience of creating a drop-down menu in WordPress. 

You can also check out our article on the best WordPress survey plugins for your site and how can a business benefit from using analytics on their website.

Also, don’t forget to follow us on Facebook and Twitter for more useful articles. 

Some of the links on this article/page are affiliate links. If you click on such an affiliate link and purchase the product, we’ll earn a specific percent commission from the seller. But it won’t at all affect the price you’ll pay.
Written By SiteSaga Editorial
SiteSaga Editorial is a team of highly experienced writers, marketers, and web developers. We're here to help beginners get online with their self-made websites or blogs and succeed.

Leave a Reply

Your email address will not be published.

SIGN UP TO GET FRESH CONTENT

Subscribe to our blog and get exclusive content every week! We don't like spam, so we won't spam you with junk email.