How to Create a WordPress Dropdown Menu and Improve Site Navigation


The WordPress dropdown menu contains a list of links nested inside of it that will expand on a click or mouse hover. WordPress sites typically use this type of menu to conserve space and improve website navigation, keeping it clutter-free for better readability.

This article will explore the steps of creating a WordPress dropdown menu manually and with a plugin. We will also provide tips to make the most out of your dropdown menus.

This method employs native features of a WordPress website to create a dropdown menu, allowing you to retain it even after switching WordPress themes or installing new plugins. The supported menu items include pages, posts, and categories.

Keep in mind that some themes don’t support dropdown menus. Check your theme’s documentation to make sure what you’re about to do is possible.

Follow these steps to create a custom dropdown menu in WordPress:

First, we need to create the standard menu. Navigate to Appearance -> Menus from your WordPress dashboard. Within the Edit Menus tab, you’ll see the Menu structure section where you can create a new menu.

Keep in mind that the appearance of this section will depend on your active WordPress theme.

Add the menu name to the textbox and select Create Menu. Then, switch to the Add menu items section and pick the desired elements for the new dropdown menu. You can do so by checking the box next to a chosen item and clicking Add to Menu.

The supported items include pages, posts, and categories. You can also insert custom links as menu items, allowing you to redirect users to your money or landing pages.

The Pages section allows users to add menu items to the menu structure

The selected menu items will appear under the Menu structure section. Simply drag and drop the items and subitems in your preferred order.

The Menu Structure section displays all the menu items that have been added

WordPress dropdown menus are customizable using CSS. First, enable this function by selecting the Screen Options menu at the top right corner of the Menus page and checking the CSS Classes box.

Checking the CSS Classes box allows users to customize the menu using custom CSS

If you expand a menu item, you’ll see a new textbox labeled CSS Classes. This is where you add WordPress CSS classes to customize the dropdown menu’s style.

The CSS Classes box will appear once you've enabled the functionality via Screen Options

To change the menu’s location, you can choose from the available options under the Menu Settings section or the Manage Locations tab. Once again, the choices will depend on your active WordPress theme.

The Menu Settings section allows users to set the menu's location.

In this example, we will place the menu at the top.

An example of a dropdown menu added to the top

Click the Save Menu button at the bottom right corner to save the changes and publish the dropdown menu.

How to locate the Save Menu button in the Edit Menus tab

Another way to create dropdown menus involves using a WordPress plugin. There are many excellent menu plugins available in the WordPress plugin directory so pick the best one for you.

We’re going to show you how to create a dropdown menu using Max Mega Menu:

  1. Install and activate the plugin.
The Max Mega Menu plugin entry in the WordPress plugin directory
  1. Navigate to Mega Menu from your WordPress dashboard. In the Menu Locations section, click on your primary menu and check the box to enable the dropdown functionality. Inside the same section, choose the event that triggers the submenu and the dropdown menu’s animation on desktop and mobile and select Save Changes.
The appearance of the Mega Menu section and how to set it up
  1. The plugin will inherit your theme’s style by default. Open the Menu Themes tab if you want to tweak the menu’s style, animation, and size. Make sure the Select theme to edit option points to your primary menu.
How to locate the Select theme to edit option in the Mega Menu section
  1. Navigate to Appearance -> Menus and add items to the default or primary menu with the Max Mega Menu functionality enabled. Click Save Menu once you’re done.
The Max Mega Menu settings inside the WordPress Menus page

Your navigation menus are some of the first website elements your visitors will see. Besides affecting the entire site’s navigation system, WordPress menus can also make or break the user experience. You want a menu bar that helps visitors find the information they need quickly.

Therefore, it’s important that your main menu is easy to use and visually appealing. Check out the following tips on optimizing the use of dropdown menus for a better user experience.

Use Visuals

One of the best ways to make your dropdown menus more interactive is to add image icons to their items using a plugin.

The Menu Image plugin, for example, provides a massive collection of FontAwesome and DashIcons icons to choose from. You can add the desired elements to the dropdown menu in different positions or include them as animations triggered on mouse hover.

The banner of the Menu Image plugin

Avoid overcrowding the space with unnecessary icons as this can hurt the menu’s readability and distract users from exploring your WordPress site.

Add Custom CSS

As mentioned above, you can add CSS classes to new menus. Consider adding custom CSS to style the menu per your preferences for advanced customization.

Go to Appearance -> Customize from your WordPress dashboard and use the Additional CSS feature to add your own code. We changed the top menu’s font color to blue in this example.

How to add custom CSS via WordPress customizer

Use the inspect tool in your browser to locate your theme’s CSS #ID selector – you’ll need it to select a specific element for customization.

How to locate a theme's ID selector using the Inspect tool in Google

Here’s the code we used to alter the font color:

#top-menu li.menu-item a {
color:#0051D7;
}

There are plenty of CSS and web design tutorials to learn from online. Feel free to experiment with different CSS styles or use pre-made code to streamline the design process.

Placing a child item under a parent item or a top-level page will automatically create a child-parent relationship, enabling the multi-level dropdown functionality.

A parent menu item can have multiple subitems. However, we recommend having no more than seven subitems per parent item not to hurt your WordPress site navigation.

An example of a child-parent menu item relationship

If you want to display a large number of options in a single dropdown menu, it’s best to create a mega menu. Unlike standard dropdown menus, mega menus typically contain more links and submenus.

Since this type of menu displays your website’s entire structure, visitors can access the deepest part of the site from the main menu. Mega menus are ideal for large websites as they shorten the user journey.

An example of a mega menu built using the Max Mega Menu plugin

There are plenty of WordPress plugins to help you create a custom mega menu. We designed the mega menu design example above using the Max Mega Menu plugin. Other notable mega menu plugins include WP Mega Menu and Hero Mega Menu.

Enable Live Preview

Select the Manage with Live Preview button at the top of the page if you need a visual reference when changing menu locations. The live preview mode is particularly useful when creating a complex multi-level dropdown menu.

How to locate the Live Preview button inside the Menus page

In this mode, all the changes made with the WordPress customizer will be displayed in real-time. You can also publish the dropdown menu through the live preview mode.

The appearance of WordPress customizer, which user can enable by activating the Live Preview mode

Conclusion

The WordPress dropdown menu is a crucial part of the website navigation system. It makes exploring a site easier and, if created correctly, helps search engines’ crawlers with indexing.

This article has covered the steps to create a dropdown menu in WordPress manually and using a plugin. We also provided some tips to optimize your dropdown menus.

We hope this article has answered all your questions about this type of WordPress menu. Good luck!

We create websites that stand-out in the crowd by making the optimum use of the WordPress features.

Contact

Company Name

Address