How to Create a WordPress Dropdown Menu and Improve Site Navigation

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.

How to Create a WordPress Dropdown Menu Manually

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:

Step 1: Create the Menu Items

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.

The Menus section of the active 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 Edit Menus tab, highlighting the Add Menu Items section

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, displaying all the menu items that have been added

Step 2: Style the Menu

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.

The Show Advanced Menu Properties section, highlighting the CSS Classes checkbox

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 under the section This is a Parent Page

Step 3: Publish the Menu

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

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

An example of a dropdown menu added to the top of a page

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

The Save Menu button in the Edit Menus tab

How to Create a WordPress Dropdown Menu With Site Editor

WordPress 6.2 added the drag-and-drop functionality to the Navigation block, making it easier to organize menu items and create submenus. You can leverage this block to build a dropdown menu in the Site Editor. Here’s how to do it:

  1. Head to Appearance Editor from your WordPress dashboard.
  2. Click the (+) symbol in the top menu bar and search for the Navigation block. Drag and drop the navigation section anywhere in the editor interface.
The Navigation block in the WordPress Site Editor
  1. In the Settings sidebar, drag an existing menu item to a lower level, turning it into a child menu.
The Navigation block settings with the Services and Contact menus highlighted in the Site Editor
  1. To create a dropdown menu with a custom link, select Options Add submenu link next to the intended parent menu item. 
The Add submenu link button in the Navigation block settings in the Site Editor
  1. Click on the (+) symbol and pick a different block to create a submenu for another content type. Drag and drop it under its intended parent menu item.
The pop-up showing different content types for a new submenu in the Site Editor
  1. Click on individual menu items to configure the link settings, such as the label, URL, and description. 
The Portfolio menu item's link settings in Site Editor
  1. To create a new submenu under the same parent menu item, select the (+) icon under the existing child menu item.
The (+) icon under the existing child menu item in Site Editor
  1. The final result will look as follows:
The final look of a dropdown menu made using WordPress Site Editor and the Navigation block

How to Create a WordPress Dropdown Menu With a Plugin

Another way to create custom dropdown menus involves using a WordPress dropdown menu 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 Menu Locations tab of the Mega Menu plugin
  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.
The Select theme to edit option in the Menu Themes tab
  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

Tips to Improve Your Dropdown Menus in WordPress

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.

The additional CSS feature on the WordPress customizer

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

The theme's ID selector displayed via Google's inspect tool

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

#top-menu a {

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.

Enable Multi-Level Dropdown Menus

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 on WordPress

Create a Mega Dropdown Menu

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.

The Manage with 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 via the Live Preview mode


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!

WordPress Dropdown Menu FAQs

Here are some of the frequently asked questions about the WordPress dropdown menu.

How to Change the Order of Items in a Dropdown Menu in WordPress?

To change the order of items in a WordPress dropdown menu, go to Appearance → Menus. Then, select the menu, drag and drop the desired item to its new position, create submenus by dragging items to the right, and save your changes.

How Can I Make My Dropdown Menu Visible on All Pages in WordPress?

Go to Appearance → Menus to make a WordPress dropdown menu visible on all pages, and select the menu you want to edit. Click on the Manage Locations tab, choose the location for your dropdown menu, then click Save Changes. The dropdown menu will now appear on all pages.

The author

Jordana A.

Jordana is a digital marketing and web development enthusiast. She loves spending her time in front of her laptop, working on new projects and learning new things. When she's not busy with work, you can find her traveling the world in search of the best sushi!