If you’ve decided that a dropdown menu may be a good fit for your WordPress site, setting one up is quite simple. By using the native menu features available in WordPress, you can create a custom navigation system that suits your needs in just five steps.
The first step towards creating a menu is deciding what to include in it. Start by navigating to Appearance > Menus in your WordPress dashboard:
Accessing the menu editor in the WordPress dashboard
What you see in the menu editor will vary slightly depending on your theme.
However, what’s important to note for now is the first option in the Edit Menus tab. You should see an option where you can select one of your existing menus to edit, as well as an option to create a new menu:
The create a new menu link at the top of the WordPress menu editor
For this example, we’ll choose the latter option and create a new menu. This involves adding a title and then clicking on the Create Menu button:
Naming and creating the new menu
Now you’re ready to start adding items to your WordPress menu. In most cases, it’s best to keep your menu as simple as possible, while still giving users enough information to get where they want to go.
Incorporating too many pages can overwhelm visitors and make navigation harder instead of easier.
There are a few different ways to go about adding your menu items. The first two are Pages and Posts, and they work very similarly.
Adding pages to the menu
In the sidebar of the menu editor, simply select the checkboxes for each page or post you want to include, and click on the Add to Menu button:
Your next option is to incorporate Custom Links. This involves providing the URL for the page you want to direct users to, and then creating a short but descriptive label for it. After that, you can click on Add to Menu again:
Adding a custom link to the menu
Finally, you can also add Page and Post Categories to your navigation menu. This will take users to an archive page where they can view all the content on a particular topic.
Blogs and other content-heavy sites may find this feature especially useful:
Adding categories to the menu
As with the Pages and Posts options, just select the checkboxes of the categories you wish to include and choose Add to Menu.
Once you’ve added all your menu items, you should see them listed in individual tiles under Menu Structure in the editor:
The Menu Structure section of the menu editor
Initially, menu items will appear in the order in which you added them. However, you can easily modify their organization by dragging and dropping them into place. This will enable you to create a simple menu with no dropdown functionality.
There are a couple of ways to go about adding dropdowns to your WordPress menu.
The simplest is to continue dragging and dropping, but start nesting certain menu items under others:
Nesting categories under the Blog page
For example, in the image above, we’ve moved the three post categories we added to the menu under Blog, making them “sub-items”. On the frontend, this will create a dropdown menu that looks like this:
Example of a dropdown menu in WordPress
If you would like to add a dropdown menu that includes all of the categories on your site, you can do so by adding a Custom Link to your menu. Use “#” as the URL and “Categories” or something similar for the label:
Creating a Categories label for the menu
You can then add all your categories to the menu and nest them under this label. Each category will be clickable, but the label won’t be:
The Categories dropdown menu
Using a similar technique, you can also hide all your menu items in a single dropdown menu.
Add another Custom Link, using “#” as the URL and “Menu” as the label. Then, nest all your other menu items under that one:
Nesting all the navigation links under a single Menu label
The result on the frontend will be a dropdown menu that includes your site’s key pages.
Join 20,000+ others who get our weekly newsletter with insider WordPress tips!
Subscribe Now
As you can see in the Categories item below, any content nested under a sub-item will show up in a sub-menu:
A true WordPress dropdown navigation menu
By using the drag-and-drop menu editor this way, you can create any style and combination of WordPress dropdown menus. Remember, however, that too many menu items can be confusing for users.
It’s also best to limit the number of sub-menus you incorporate, to avoid over-cluttering your navigation.
If by the end of Step 2, your dropdown menu looks exactly like you imagined it, you can skip to Step 5 to publish it. However, there are additional steps you may want to take if you’d like to enhance your menu with customizations.
One tactic to consider is incorporating visual elements into your menus to provide further guidance for visitors. While descriptive labels are vital, sometimes an image or an icon can help users more quickly determine where a particular navigation link leads.
It is possible to add images using custom CSS, which we’ll discuss shortly. However, we recommend picking up a plugin such as Menu Image, Icons Made Easy:
WordPress dropdown menu with images
This way, you don’t have to worry about bothering with any code in order to add visual interest to your dropdown menu.
Simply install the plugin and then return to Appearance > Menus:
The Menu Image section in the menu editor
You’ll see that there are now image options for each page you’ve included in your menu. You can select each page’s photo, size, and position. Remember to save your changes when you’re done.
While it’s not recommended for beginners, intermediate and advanced users may want to incorporate their own styling in their WordPress dropdown menus. Before you jump right into your CSS, however, you’ll need to add a class to your menu.
If you skip this step, your custom CSS may cause problems for any other menus on your site. For instance, you may inadvertently apply styling to your footer menu that you meant only for your main dropdown menu.
In the menu editor, click on Screen Options in the top-right corner:
The Screen Options tab in the menu editor
Then, check the box for CSS Classes:
The CSS Classes checkbox in the Screen Options tab
This will add a CSS Classes field to each page in your menu:
Tired of a slow host for your WordPress site? We provide blazing fast servers and 24/7 world-class support from WordPress experts. Check out our plans
The CSS Classes field in the menu editor
Once you add one or more CSS classes to your menu items, any custom code you include on your stylesheet will only apply to the items in your menu with the class you specify.
You can now head over to your stylesheet or the Customizer, and get to work on your custom styling.
Once your WordPress dropdown menu is structured to meet your needs, and you’ve incorporated any customizations you want, you’ll be ready to publish it to your site.
This process will vary slightly depending on your theme and which menu locations it supports. For this example, we’re going to use the Twenty Twenty theme.
In the menu editor, scroll down to the Menu Settings section:
The Menu Settings section in the editor
You can select the first checkbox if you wish for new pages to be automatically added to your menu. If you’re just getting started with your site and haven’t added all your key pages yet, this may be useful. However, be careful that you don’t accidentally add too many items to your menu.
Below this option, you’ll see a list of checkboxes noting the different areas of your site where you can display your menu.
The Twenty Twenty theme includes different menu areas: Desktop Horizontal Menu, Desktop Expanded Menu, Mobile Menu, Footer Menu, Social Menu.
In this case, the menu we’ve created is best suited to the Desktop Horizontal Menu location, which is in the site’s header:
Desktop Horizontal Menu for the Twenty Twenty theme
You might also consider navigating to the Manage Locations tab in the Menus area of your dashboard. Here you can see all the menu locations that are supported by your theme, as well as which menu you’ve assigned to each one:
The Manage Locations tab
When placing your menus, it can be helpful to see what they’ll look like on the frontend.
The Manage with Live Preview option
Click on the Manage with Live Preview button to see how your menu will appear in the location you’ve chosen for it, using the WordPress Customizer:
A live preview for the WordPress menu in the Customizer
You can then publish your menu or menus directly from the Customizer. If you ever need to add or remove items from your dropdown menu, you can simply return to the menu editor and make the necessary adjustments.
Last updated May 27, 2022
Views 385
Applies to: Other