Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

Better Navigation: How to Add a Dropdown Menu in WordPress

by
Difficulty:BeginnerLength:ShortLanguages:

WordPress features a built-in menu management system that makes it easy to add menus to your website. However, as you add more and more pages, posts and other miscellaneous content, it may become impossible to include every destination in your standard menu bar. 

In these scenarios, you can provide easy access to every section of your website without cluttering the menu bar, by replacing the standard horizontal menu bar with a dropdown menu.

In this quick tip, I’ll share two easy ways that you can transform any standard WordPress menu into a dropdown menu.

Best WordPress Navigation Plugins

Before we get started, I want to mention that you can find over 7,000 of the best WordPress plugins ever created on CodeCanyon. With a cheap one-time payment, you can purchase these high-quality WordPress plugins for navigation or other needs. 

WordPress plugins for navigation

Free WordPress Tutorial Video

Also, you may want to check out our in-depth WordPress tutorial, which consists of over two hours of in-depth WordPress video instruction for beginners. There's even a special lesson dedicated to using WordPress menus.

Create at Least One Standard WordPress Menu 

You can add dropdown functionality to any WordPress menu.

If you don’t have a standard menu that you want to convert into a dropdown menu, then you’ll need to create one.

Log in to your WordPress account, if you haven’t already. In WordPress’s left-hand menu, select Appearance > Menus, and then click the Create a new menu button. Give your menu a name, and then select Create new menu

Note that the menu’s name won’t appear anywhere on your website, so this is solely for your reference. The Add menu items section lists all the Pages, Posts, Custom Links, Categories, and Formats that you can add to your menu. Click any section to see all the available items within this category. When you find an item that you want to add to your menu, select its accompanying checkbox.

Select all the destinations that you want to add to your WordPress menu

When you’re happy with your selection, click Add to menu. All of these items will now be added to your menu. 

At this point, you’ve created a standard WordPress menu; your next task is adding the dropdown functionality.  

Convert Any WordPress Menu Into a Dropdown Menu

To turn a regular menu into a dropdown menu, you’ll need to use drag and drop to create “parent” items, which will be displayed as part of the main menu, and “child” items, which will appear as part of their parent’s dropdown.

For example, in the following screenshot, Settings is the parent, and Password Reset and Logout are its children.

You can turn any regular menu into a dropdown menu using drag and drop

This gives me the following dropdown:

 Child menu items are displayed as part of their parents dropdown

You can separate your menu items into parents and children in the Menu structure area.

First, grab any item that you want to turn into a child. Drag the child onto the parent item, but don’t release your mouse just yet. Move your mouse slightly to the right, so it’s embedded below the parent. Release your mouse, and the menu item should become a child of the parent item.

When you’re happy with how your dropdown menu is organized, click Save Menu.

Manage Locations: Displaying Your Menu

Now we need to place this dropdown menu on our website, so give the Manage Locations tab a click. 

Depending on how your site is set up, you may have different options for positioning your menu. However, if you want your menu to appear as part of your website’s header, then you’ll typically need to select Top Menu, Primary Menu, or Primary.

When you’re happy with your selection, click Save Changes. Your dropdown menu should now be displayed along the top of your website.

Building Dropdown Menus With the Theme Customizer

Alternatively, you can create dropdown menus using WordPress’s live preview and customizer feature.

In WordPress’s left-hand menu, select Appearance > Menus.

Give the Manage with Live Preview button a click. This takes you to an area of the Theme Customizer where you can build a standard WordPress menu, by giving the Create New Menu button a click. Give your menu a name, and then click Next.

Click Add items and select every item that you want to display as part of your menu. To turn a standard menu item into a child menu item, drag it onto the item you want to use as its parent. Before releasing your mouse, drag the child item a little to the right, and then release. This item should now be transformed into a child of the parent item, and it will appear as part of its dropdown menu. 

As you divide your menu into parents and children, your changes will be automatically reflected in the live preview. Rinse and repeat until you’re happy with how your dropdown menu is configured.

Specify where your new dropdown menu should appear by selecting one of the Menu Location checkboxes. Note that the available options will vary, depending on the WordPress theme you’re currently using. When you’re happy with how your dropdown menu is configured, click Publish.

Your new dropdown menu should now appear on your website.

Conclusion 

In this quick tip, I showed you how to create a standard WordPress menu and then convert that menu into a dropdown menu. By opting for dropdown menus, you can ensure your website is easy to navigate, without cluttering the menu bar.

For more tips and tricks on how to get the most out of WordPress menus and other WordPress plugins, check out some of our other tutorials.

UberMenu: The Best-Selling WordPress Mega Menu Plugin

If you're looking for a best-in-class menu plugin for WordPress, check out UberMenu.

UberMenu Mega Menu

You can develop customized mega menus for your WordPress site quickly with UberMenu. One of CodeCanyon’s best-selling WordPress mega menu options, this plugin works right out the box to build fully responsive, touch-enabled menus that perform consistently across platforms. This user-friendly plugin lets you quickly build advanced submenu layouts in a system that you are already comfortable using.

This plugin is fully customizable, so you can build a mega menu that works perfectly with your website.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.