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 selected menu items will appear under the Menu structure section. Simply drag and drop the items and subitems in your preferred order.
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.
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.
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.
In this example, we will place the menu at the top.
Click the Save Menu button at the bottom right corner to save the changes and publish the dropdown menu.
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:
- Install and activate the plugin.
- 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 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.
- 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.
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.
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.
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.
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.
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.
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.
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.
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!
