How to create a WordPress dropdown menu: use built-in menu settings or plugins for advanced navigation, styling, and mobile optimization.
Dropdown menus make navigation more organized when a basic top-level menu is not enough. They are particularly helpful for growing WordPress sites with multiple pages, blog categories, and service sections.
This guide by GetDevDone practitioners shares the main ways to create and customize WordPress dropdown menus. You can also find practical tips on theme support, mobile behavior, and using built-in menu controls rather than extra plugins.
A dropdown menu (also spelled as ‘drop down menu’ and called ‘a dropdown list’) is a menu that includes several options (submenus). As the name suggests, the list of submenus becomes visible, i.e., drops down, when users trigger the list by hovering the mouse over the menu item or clicking on it. Usually, it’s a part of the navigation bar of the website.
Since WordPress platform development is pretty intuitive, creating a dropdown menu is easy. The problem is that not every website owner can make such menus useful. When you start adding too many levels or cannot ensure a smooth mobile experience, users’ frustration hits hard.
The most common mistakes to avoid with dropdown menus are overcrowded navigation, confusing multi-level structures, and using a menu plugin when the built-in WordPress menu system is enough. Dropdowns must help users find content faster. If they confuse or slow down users because of multiple layers, something is wrong.
At GetDevDone, we recommend testing the menu structure on desktop and mobile before adding more menu levels or customization. The simpler the menu is, the better.
If you have a small website, you might do without a dropdown menu. All your necessary links are likely to fit in one row of the navigation bar. With time, when your website grows, you may need to add more items. That’s when a dropdown menu comes in useful. The main purpose of a dropdown menu is to organize items.
A dropdown menu is essential for your website if you have an online store. It’s hard to imagine an eCommerce website development with multiple categories without dropdown menus. Grouping products into categories and adding them as submenus guarantees faster navigation and a better user experience.
For websites that have a blog, it’s possible to group posts by topics into categories and to include these categories in a dropdown menu.
In short, dropdown menus aim to:
Creating a dropdown menu to manage website navigation on a WordPress website is a built-in feature. Yet, it depends on your theme. Thus, you have to check whether your theme supports this functionality.
If you haven’t installed a WordPress theme, you can check the theme’s demos to see whether dropdown menus are available. Also, you can read the theme’s description and documentation to find this feature.
If you already have a theme, you can try to customize your menu following the steps below. If your theme allows you to arrange menu items, you will be able to create a dropdown list.
Adding a dropdown menu in WordPress is quite easy. You can do this in several ways by
Let’s look at these methods.
To customize your navigation menu, open the ‘Menus’ submenu in ‘Appearance’ on your dashboard.
If you already have a navigation menu and want to edit it, you can continue to the next step. Alternatively, you can create a new menu and edit it. To do this, click on the ‘Create a new menu’ on top of the editing area.
Then, you can start customizing your menu. On the left, you‘ll see the ‘Add menu items’ option and a list of items you can add. Precisely, it’s possible to choose from pages, posts, custom links, and categories. Tick the items you wish to include and press the ‘Add to Menu’ button.
You should choose all the necessary items, including those that will function as WordPress submenu dropdown items.
The chosen items will appear in the right part, in the Menu structure section.
The menu items you have selected will appear in the chosen order. At this stage, you can organize the menu, changing the position of items and creating submenus.
You need to drag the items up and down to create the desired order.
Similarly, to create a dropdown menu, it’s necessary to transform menu items into submenus. If you drag a menu item to the right, it will become a submenu. When finished, remember to save the menu.
If necessary, you can rename menu items. To do this, click on the arrow on the right and change the Navigation Label according to your needs.
To see your new menu, decide where you want it to appear. In the ‘Menu Settings’ section, tick the necessary option in the ‘Display location’. Then, remember to save the menu.
Your dropdown menu is ready. You can open any page and view your new menu. It’s possible to see them when users hover the mouse over ‘About Us’.
Another way of creating a dropdown menu in WordPress is by editing the navigation bar with a Live Preview. The steps you need to take are very similar to those described above.
You can also create multilevel dropdown menus. We’ll show the process of making such menus and the results by editing the Blog menu item.
After opening the Menus submenu in Appearance on the WordPress dashboard (like we did previously), you’ll see the ‘Manage with Live Preview’ option next to the title ‘Menus’.
When you click on it, you’ll see a dashboard with a list of menus on the left and a preview of a page with the current menu. To edit the menu that you see, you can click on the pencil icon displayed on the menu.
Then, on the left, you’ll see the menu’s title and the option ‘Edit Menu’. When you click on it, the menu items you can edit will be visible.
We’ll create a multilevel dropdown menu, adding blog category pages.
Adding category pages to the menu is similar to adding pages. You simply need to
Yet, blog subcategories don’t necessarily need to be sub-items of the second level in the menu. In other words, the Blog item in the navigation menu can include Marketing and other subcategories as subitems of the same level. It’s up to you to decide whether to show these levels.
To arrange the menu and create multiple levels, use the technique described above: drag menu items to the right to make them subitems. If you need to create the next level of the WordPress dropdown menus, drag the item to the right again.
After saving the menu, you can preview it without leaving the customization mode by hovering the mouse over the menu. Otherwise, you can open the website and see the changes.
Also, the icon next to the About Us item shows that there’s another dropdown list (which we created earlier). So, you can have as many dropdown lists as you wish.
The theme you are using determines the style of your navigation menu and dropdown lists. Still, you can change the styles by adding custom CSS code to menu items.
First, you need to create the style that you want to use. To do this, you have to open ‘Customize’ in the Appearance menu of your dashboard and choose ‘Additional CSS’.
Next, you have to create a style and insert your custom code that will define the look of menu items.
Afterward, you can return to editing menus. In the upper part of the menus’ customization area, choose ‘Screen Options’.
When you expand these screen options, tick ‘CSS Classes’ to allow applying custom CSS styles.
Then, when you are customizing menu items, you’ll be able to add your style in the CSS Classes field.
After saving the menu, you’ll see the result. Our code included a grey background and underlined italics.
Plugins are typically used when more complex dropdown behavior is required. They are usually justified when you need mega menus, more advanced mobile behavior, or advanced customization options. For standard menus, native WordPress functionality is usually enough.
Max Mega Menu by megamenu.com, which has more than 400.000 active installations, is one of the most user-friendly plugins with a vast variety of options for editing the menu. It’s compatible with WordPress version 4.9 or later, and its latest update (January 2022) has been tested up to 5.9.2.
You can hover the mouse over a menu item and adjust it separately, choose the dropdown event type (hover or click), and add effects such as fading.
Additionally, you can create various menu themes and customize them to your liking. The menu theme customization includes options for general settings (arrows, shadows, transitions), the Menu Bar (height, colors, borders, padding, gradients), mega menu specific customization, Mobile Menu settings, and Custom Styling via CSS. If necessary, you may add icons to the menu items.
Additional menu item settings allow you to hide text, arrows, and the item on mobile or desktop, as well as disable links and adjust alignment and icon position.
It is another user-friendly plugin with a multitude of menu customization options. Similar to the Max Mega Menu plugin, WP Mega Menu uses themes to customize menus. The main features include a drag-and-drop menu builder panel, widgets in the menu, social icons, a search bar in the menu, responsive support, and mobile menu support. You can also select custom colors, fonts, and attributes for menu items.
This plugin is a nice option to turn standard, linear menus into a multi-column, highly customizable dropdown.
WordPress Mega Menu – QuadMenu helps create multi-column mega menus and style dropdown lists. This plugin doesn’t always support automatic integration into all WordPress themes. However, you can use it after manual integration.
This Mega Menu plugin also uses themes to customize WordPress submenu dropdown items and the navigation bar. You can adjust the theme, changing the menu style, dropdown appearance, typography, animations, and mobile settings.
To be precise, you can customize the menu layout, items alignment, dropdown trigger, colors (usual and on hover), links, icons, buttons, etc. It’s possible to change many parameters, such as height, margins, padding, etc.The title of this plugin is ‘Mega Menu’, and it does help create mega menus. It’s possible to set the number of columns, choose the mega menu layout, and add the necessary items to the lists.
WordPress menus are enough for most websites, while plugins are justified when navigation is a part of a more complex design. Below are some other tips to follow when creating dropdown menus.
As WordPress has built-in options to manage website navigation, we recommend mastering this functionality. Arranging menus doesn’t require many skills, and dragging elements to create submenus is pretty straightforward.
WordPress lets you see the changes in your dropdown menus when using the Live Preview. Thus, you don’t have to switch between the customization dashboard and the website page to make sure you like the edits.
Even with the inherent WordPress functions, it’s possible to make dropdown lists that include several levels. Apply the same principle of dragging elements to the right, and you’ll get a multi-level menu.
To save space on your navigation bar, you may add several dropdown lists. Remember to group the pages logically so that users can easily find the necessary elements.
You can customize your dropdown menu by adding CSS code or installing plugins. You can find free plugins with multiple options to adjust colors, typography, and hover effects.
Dropdown menus help you organize a growing WordPress site into an understandable structure. In most cases, WordPress capabilities are enough to create a menu with clear navigation, submenus, and multiple levels.
The most difficult part when creating dropdowns is making them clear and intuitive. While a good dropdown saves space and simplifies navigation, a bad one confuses users. We recommend starting with native WordPress capabilities and simplicity, and adding extra plugins and styling only when the project needs more advanced customization.
Production-ready development that improves speed, UX, and scalability
Order NowThe main way to add dropdown menus is by using WordPress built-in functionality. Go to Appearance > Menus or the Customizer / Live Preview. After choosing and adding the necessary items to the menu, drag items to the right to make them subitems.
You can also install plugins to create and customize menus with dropdown lists. Plugins are recommended mainly for advanced layout, styling options, and more customized mobile behavior.
A WordPress dropdown menu can include pages, posts, blog categories, custom links, and WooCommerce pages or other content types registered by the site. The options depend on the existing website content and what the theme or plugins enable in the menu editor.
The number of items is usually less important than their logical grouping to keep navigation clear.
A plugin is typically a better choice when a website needs more than simple nested navigation. The most common use cases include mega menus, advanced mobile menu behavior, extra styling controls, or special layouts that are not supported by built-in capabilities.
However, for most websites, built-in WordPress menus are a preferable option. They are easier to maintain and reduce compatibility risks.
First, it’s necessary to ensure that your WordPress theme supports the expected dropdown menu placement and behavior. Then, you need to test the menu’s placement and behavior. Check whether the structure and navigation are easy to scan and predictable. If you will use a plugin, you also need to check its compatibility with your theme.
Sometimes, yes. Multi-level dropdown menus can help organize large websites with multiple subcategories. On the other hand, too many levels may complicate navigation, particularly on mobile devices.
The best approach is to keep the website menu as simple as possible, including only essential items. If users get lost within multiple layers, navigation needs simplification rather than expansion.
Learn how we're partnering with Aus Flying to craft a user-friendly and feature-rich digital hub that bridges the gap between pilots and aircraft owners.
Compare Elementor and custom WordPress themes to find the most cost-effective solution for performance, flexibility, and growth.
See how we developed the Filamente at WordPress website, delivering a custom solution with strong performance and user experience.
