How to Create a Dropdown Menu in WordPress (Beginners Guide)

Do you need to make a dropdown menu and upload it to your WordPress web page?

A dropdown menu displays a listing of hyperlinks as you’re taking your mouse over an merchandise at the menu.

We use a dropdown menu on WPBeginner, cross forward and take your mouse over the navigation menu on most sensible.

In this newbie’s information, we will be able to display you ways to simply create a dropdown menu in WordPress with step-by-step directions.

Why Use Dropdown Menus in WordPress?

WordPress comes with a built-in menu control machine that permits you to simply upload navigation menus to your WordPress web site.

Navigation menus are hyperlinks to the principle pages of your web page that most often seem at the most sensible as a horizontal row proper subsequent to the web page’s emblem.

Typical navigation menu with a horizontal row of links

If you might be beginning a weblog or growing a web page with best a few pages, then you’ll be able to upload them in the one row.

However, in the event you run an internet retailer or a massive web page, then you might have considered trying to upload extra hyperlinks to the navigation menu.

Dropdown menus mean you can remedy the restricted area factor by way of appearing menu hyperlinks best when customers deliver their mouse over to a mum or dad merchandise. They additionally permit you to prepare the menu construction by way of subjects or hierarchy.

Dropdown menu example

Lastly, they appear beautiful great too.

That being stated, now let’s take a have a look at how you’ll be able to simply create WordPress dropdown menus upload them to your web page.

Video Tutorial

If you don’t just like the video or want extra directions, then proceed studying.

Step 1. Choosing a Theme with Dropdown Menu Support

WordPress comes with a built-in menu control machine however exhibiting the ones menus is totally dependent to your WordPress theme.

Almost all WordPress issues improve dropdown menus by way of default. However, some issues won’t have right kind menu improve.

You want to just remember to are the use of a WordPress theme that helps dropdown menus.

How have you learnt if the theme you might be the use of helps the dropdown menu?

You can merely talk over with the theme’s web page the place you’ll to find a hyperlink to the theme’s demo. From there you’ll be able to see if the demo is appearing a dropdown menu in the navigation menu.

If it isn’t, you then’ll want to to find a WordPress theme that does.

See our information on how to make a choice the easiest WordPress theme to your web page.

Here are a few superb issues that improve the dropdown menu out of the field.

  • Astra – It is a multipurpose WordPress theme that includes a number of starter websites and heaps of options.
  • StudioPress issues – Built on most sensible of genesis theme framework, those skilled issues are extremely optimized for efficiency.
  • OceanWP – A well-liked WordPress theme this is appropriate for all more or less web sites.
  • Ultra – Powered by way of Themify builder this drag and drop WordPress theme comes with stunning templates and versatile theme choices.
  • Divi – in style theme by way of Elegant Themes that makes use of the Divi web page builder and springs with heaps of drag & drop options together with dropdown menus.

That being stated, now let’s take a have a look at how to create a dropdown WordPress menu.

Step 1. Creating a Navigation Menu in WordPress

If you will have already arrange a navigation menu to your web page, then you’ll be able to skip to the next move.

Let’s create a easy menu first.

Go to Appearance » Menus web page and click on at the ‘Create a new menu’ hyperlink on the most sensible.

Create a menu

Next, you want to supply a title to your navigation menu. This title might not be publicly visual to your web page. The objective of menu title is to mean you can establish the menu throughout the WordPress admin house.

Menu name

Enter a title to your menu after which click on at the ‘Create Menu’ button.

WordPress will now create a new empty menu for you.

Let’s upload the highest hyperlinks to the navigation menu. These goods will seem in the highest row of your menu.

Simply make a selection the pages you need to upload from the left column and click on at the ‘Add to menu’ button. You too can make a selection weblog posts, classes, or upload customized hyperlinks.

Add pages to menu

You will now see the ones pages seem in the fitting column below your new menu.

Step 2. Adding Sub-Items to a Menu

Sub-items are the goods that can seem throughout the dropdown menu. Depending on how you need to prepare your menus, you’ll be able to upload them below any of the present goods.

For the sake of this educational, we will be able to be including classes below the weblog hyperlink.

Simply make a selection the goods you need to upload from the left column after which click on at the ‘Add to menu’ button. Your goods will now seem in the fitting column.

New menu items added to the menu

However, those hyperlinks will seem as common goods. We want to lead them to a sub-item of a mum or dad menu.

You can merely drag and drop a menu merchandise and position it below the mum or dad merchandise. Move it quite to the fitting, and it is going to turn into a sub-item.

Adding sub menu items to create a dropdown menu

Repeat the method for all hyperlinks you need to display below the dropdown menu.

Once you might be finished, don’t fail to remember to click on at the ‘Save menu’ button to retailer your adjustments.

Step 3. Publish Your Dropdown Menu

If you might be enhancing a menu that’s already live to tell the tale your web page, then it is going to get started showing to your web page in an instant.

However, whether it is a new menu merchandise, you then now want to make a choice a theme location to show this menu.

WordPress issues can display menus at other places. Each theme defines their very own menu places, and you’ll be able to make a selection which menu you need to show there.

You’ll to find this feature in the fitting column below ‘Menu settings’. Select an choice subsequent to the ‘Display location’ environment and click on at the ‘Save menu’ button.

Choose theme location

You can now talk over with your web page to see your dropdown menu in motion.

Dropdown menu preview

Tips on Creating Interactive Dropdown Menus

Navigation menus are necessary as a result of that is the primary position your customers will glance if they would like to see explicit knowledge.

Using them as it should be will assist your customers to find their means round your web page. It may also mean you can get extra pageviews, conversions, and gross sales to your web page.

Here are a few recommendations on making your navigation menus extra interactive with dropdown menus.

1. You can create multi-level dropdown menus

Making a hyperlink a sub-item of any other hyperlink makes it seem in the dropdown menu. You too can upload a sub-item beneath any other sub-item to create multi-level dropdown menus.

Multi level menus

Your theme would robotically display them as a sub-menu throughout the dropdown.

Multi-level dropdown menu

2. You too can create a couple of dropdown menus

You can create a dropdown below any most sensible hyperlink in your menu. You may also upload a couple of dropdown menus in your major navigation menu.

Multiple dropdown menus in the primary menu

3. Create menus with a reside preview

If your menu will get too sophisticated, then you’ll be able to transfer to the visible preview. Go to Appearance » Customize to release the reside theme customizer.

From there, click on at the ‘Menus’ tab after which make a selection your navigation menu. You’ll now see a drag and drop menu editor in the left column with a reside preview of your web site in the fitting panel.

Customize WordPress menus with a live preview

4. Creating a massive mega menu as dropdown in WordPress

The dropdown menus best display one dropdown at a time. What in the event you sought after to display the overall construction of your web page as a mega menu that best seems when customers hover at the major menu?

Mega menu example

Mega menus do seem as a dropdown menu, however they may be able to display a lot extra hyperlinks, sub-menus, and extra. For detailed directions, see our step-by-step educational on how to create a mega menu in WordPress.

We hope this newsletter helped you learn the way to simply create a dropdown menu in WordPress. You might also need to see our information how to create a sticky floating navigation menu in WordPress and the way to upload symbol icons to navigation menus in WordPress.

If you loved this newsletter, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can to find us on Twitter and Facebook.

Recent Articles

The New Apple Music Features to Definitely Try in 2021

Apple Music is a nice app but it is not the most loved app, even among Apple users. The wide range of...

Best Free News Apps for iPhone and iPad in 2021

The year isn’t going as we expected, we are still living through a pandemic and all the problems of the world didn’t...

Best Apps to Hide Pictures & Videos on Your Phone

Privacy is important in everyone’s life, the intensity might change but no one wants to share everything with the world. Even the...

5 Best Health Apps for a Healthy Lifestyle for Everyone in 2021

Times have changed, but the only thing that has remained constant is the need for a healthy lifestyle. Various factors contribute to...

The Most Exciting Features of Apple iOS 14.5 for iPhone and iPad

The Most Exciting Features of Apple iOS 14.5  Apple tries to bring something new and better with every iOS...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here