It's hard to imagine a website without dropdowns. It you want to learn how to create and add dropdown menus in WordPress, this post will teach you.
Dropdown menus are an essential part of many websites. Here, we’ll talk about the reasons to use dropdown lists and teach you how to create and customize dropdowns. Follow our step-by-step instructions to create a perfect menu for your site.
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.
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 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. For instance, in the screenshot below, you can see that we are adding the ‘About Us’ page to the menu.
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. The screenshot below shows a menu item ‘About Us’ that we added in the previous step and three subitems (Our Story, Our Partners, Careers with Us). 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. As shown in the screenshot below, the menu item ‘About Us’ now has an arrow indicating that it includes several submenus. It’s possible to see them when users hover a 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. As you can see in the screenshot below, the Blog item doesn’t have any subitems.
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
As you can see in the screenshot above, the blog category ‘Marketing’ includes several subcategories (Branding, Digital Marketing, SEO, Social Media). Yet, blog subcategories don’t necessarily need to be subitems 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.
The screenshot below illustrates the menu item Blog and two subitems – Marketing and Adventure. The Marketing submenu also includes several subitems.
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. As seen in the screenshot below, there are two levels in the Blog menu.
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 codes 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, as in the screenshot below.
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. That is the result you can see in the screenshot below.
Different WordPress plugins can help you in customizing your WordPress dropdown menus. Here, we’ll look at the most popular ones.
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.
After installing and activating the plugin, you’ll see additional customization options in your menu customization area. As shown in the screenshot below, you can hover the mouse over a menu item and adjust it separately. Also, you can choose the event type, i.e., when you want your dropdown menu to appear (hover or click). Likewise, you can add effects such as fading and adjust their speed.
Additionally, you can create various menu themes and customize them to your liking.
The menu theme customization includes a huge variety of options.
If necessary, you may add icons to the menu items (in our case – next to the About Us title).
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.
The Max Mega Menu also has a Pro version with three types of licenses:
The features that you’ll find in the Pro version are:
WP Mega Menu by Themeum is another user-friendly plugin with a multitude of menu customization options. It works with WordPress 4.0 and newer and got the latest update five months ago; it has been tested up to version 5.8.4.
Similar to the Max Mega Menu plugin, WP Mega Menu uses themes to customize menus. There are three themes by default, and you can adjust each one as much as you prefer.
As shown in the screenshot above, theme settings have numerous options that you can change. Let’s look at some of them.
There are also settings for the mobile menu, social links, and custom CSS/JS styles.
After installing and activating the plugin, you can start customizing the themes. Then, switch to the menu editing on the WordPress dashboard. In the field where you can add items, you’ll see the Mega Menu Settings. Enable the mega menu and tick the theme you want to use.
After saving the changes, you can preview your WordPress dropdown menus and continue the customization process if necessary.
The plugin also has a pro version that includes:
The annual payment is:
WordPress Mega Menu – QuadMenu is the tool that helps to create multi-column mega menus and style dropdown lists. Updated in March 2022 and having more than 20000 active installations, this popular plugin can work with WordPress 4.6 or later.
We must mention that this plugin doesn’t always support automatic integration into any WordPress theme. However, you can use it after manual integration. ‘If your menu doesn’t seem to be working properly after using Automatic Integration, the most common scenario is that you have residual styling from your theme and would need to use Manual Integration instead,’ the plugin warns. You’ll see the instructions on manual integration in the plugin’s options after activating it.
This Mega Menu plugin also uses themes to customize WordPress submenu dropdown items and the navigation bar. In the Options tab, 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 screenshot below shows the dropdown menu styled with the plugin. As you can see, the navigation bar and the dropdown menu have different fonts and colors.
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.
In the screenshot, you can see a two-column mega menu with blog categories.
The pro version of the plugin includes the following additional features:
You can choose from 3 plans:
All plans include lifetime updates and personalized support.
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 necessary elements.
You can customize your dropdown menu by adding a CSS code or installing plugins. You can find free plugins with multiple options to adjust colors, typography, and hover effects.
You can add dropdown menus using WordPress built-in functionality. You can create and edit dropdown menus as a part of the navigation menu via Appearance – Menus in the WordPress dashboard. 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.
Dropdown menus can contain links to pages, posts, blog categories, custom links, and WooCommerce pages. Select the necessary items from the corresponding lists when creating/editing a menu.
If you want to apply specific styles to dropdown menus, you can turn on custom CSS styles for them and add the necessary coding. Alternatively, you can use a plugin to customize the dropdown menu’s look.
First, it’s necessary to ensure that your WordPress theme supports dropdown menus. Second, if you want to use plugins to adjust your dropdowns, check that it’s compatible with the theme you are using. In some cases, you’ll need to activate the plugin manually.
Creating and adding WordPress dropdown menus seems straightforward enough. But If you still have questions or need assistance with this task, our expert WordPress developers can help. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world’s most popular CMS.
Reach out to us with any WordPress-related request, from building a custom theme or tweaking your current one to Core Web Vitals optimization and plugin development.
In this day and age, rather than building a site from the ground up, businesses have a wide range of content management systems (CMSs) at their disposal. These make the web development process a breeze by tremendously simplifying addition and manipulation of content. CMSs, however, are not devoid of shortcomings. Most of them require a […]
Gutenberg is the core WordPress block editor. While it provides a lot of powerful features, it also has quite a steep learning curve. So, if you're new to Gutenberg, this post should help you get to grips with it.
Explore how we transformed BizDeva's vision into a stunning, functional WordPress website that captures the client's brand identity while enhancing user engagement.
