Dropdown menus are an essential part of many websites. Here, we\u2019ll 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.<\/p>\n\n\n\n
A dropdown menu (also spelled as \u2018drop down menu\u2019 and called \u2018a dropdown list\u2019) 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\u2019s a part of the navigation bar of the website.<\/p>\n\n\n\n
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\u2019s when a dropdown menu comes in useful. The main purpose of a dropdown menu is to organize items.<\/p>\n\n\n\n
A dropdown menu is essential for your website If you have an online store. It\u2019s 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.<\/p>\n\n\n\n
For websites that have a blog, it\u2019s possible to group posts by topics into categories and to include these categories in a dropdown menu.<\/p>\n\n\n\n
In short, dropdown menus aim to:<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
If you haven\u2019t installed a WordPress theme, you can check the theme\u2019s demos to see whether dropdown menus are available. Also, you can read the theme\u2019s description and documentation to find this feature.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Adding a dropdown menu in WordPress is quite easy. You can do this in several ways by<\/p>\n\n\n\n
Let\u2019s look at these methods.<\/p>\n\n\n\n
To customize your navigation menu, open the \u2018Menus\u2019 submenu in \u2018Appearance\u2019 on your dashboard.<\/p>\n\n\n\n
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 \u2018Create a new menu\u2019 on top of the editing area.<\/p>\n\n\n\n
Then, you can start customizing your menu. On the left, you\u2018ll see the \u2018Add menu items\u2019 option and a list of items you can add. Precisely, it\u2019s possible to choose from pages, posts, custom links, and categories. Tick the items you wish to include and press the \u2018Add to Menu\u2019 button. For instance, in the screenshot below, you can see that we are adding the \u2018About Us\u2019 page to the menu.<\/p>\n\n\n\n
You should choose all the necessary items, including those that will function as WordPress submenu dropdown items.<\/p>\n\n\n\n
The chosen items will appear in the right part, in the Menu structure section.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
You need to drag the items up and down to create the desired order.<\/p>\n\n\n\n
Similarly, to create a dropdown menu, it\u2019s 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 \u2018About Us\u2019 that we added in the previous step and three subitems (Our Story, Our Partners, Careers with Us). When finished, remember to save the menu.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
To see your new menu, decide where you want it to appear. In the \u2018Menu Settings\u2019 section, tick the necessary option in the \u2018Display location\u2019. Then, remember to save the menu.<\/p>\n\n\n\n
Your dropdown menu is ready. You can open any page and view your new menu. As shown in the screenshot below, the menu item \u2018About Us\u2019 now has an arrow indicating that it includes several submenus. It\u2019s possible to see them when users hover a mouse over \u2018About Us\u2019.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
You can also create multilevel dropdown menus. We\u2019ll show the process of making such menus and the results by editing the Blog menu item.<\/p>\n\n\n\n
After opening the Menus submenu in Appearance on the WordPress dashboard (like we did previously), you\u2019ll see the \u2018Manage with Live Preview\u2019 option next to the title \u2018Menus\u2019.<\/p>\n\n\n\n
When you click on it, you\u2019ll 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.<\/p>\n\n\n\n
Then, on the left, you\u2019ll see the menu\u2019s title and the option \u2018Edit Menu\u2019. 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\u2019t have any subitems.<\/p>\n\n\n\n
We\u2019ll create a multilevel dropdown menu, adding blog category pages.<\/p>\n\n\n\n
Adding category pages to the menu is similar to adding pages. You simply need to <\/p>\n\n\n\n
As you can see in the screenshot above, the blog category \u2018Marketing\u2019 includes several subcategories (Branding, Digital Marketing, SEO, Social Media). Yet, blog subcategories don\u2019t 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\u2019s up to you to decide whether to show these levels.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
The screenshot below illustrates the menu item Blog and two subitems – Marketing and Adventure. The Marketing submenu also includes several subitems.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
Also, the icon next to the About Us item shows that there\u2019s another dropdown list (which we created earlier). So, you can have as many dropdown lists as you wish.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
First, you need to create the style that you want to use. To do this, you have to open \u2018Customize\u2019 in the Appearance menu of your dashboard and choose \u2018Additional CSS\u2019.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Afterward, you can return to editing menus. In the upper part of the menus\u2019 customization area, choose \u2018Screen Options\u2019.<\/p>\n\n\n\n
When you expand these screen options, tick \u2018CSS Classes\u2019 to allow applying custom CSS styles.<\/p>\n\n\n\n
Then, when you are customizing menu items, you\u2019ll be able to add your style in the CSS Classes field. <\/p>\n\n\n\n
After saving the menu, you\u2019ll see the result. Our code included a grey background and underlined italics. That is the result you can see in the screenshot below.<\/p>\n\n\n\n
Different WordPress plugins can help you in customizing your WordPress dropdown menus. Here, we\u2019ll look at the most popular ones.<\/p>\n\n\n\n
Max Mega Menu<\/a> 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\u2019s compatible with WordPress version 4.9 or later and its latest update (January 2022) has been tested up to 5.9.2.<\/p>\n\n\n\n After installing and activating the plugin, you\u2019ll 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.<\/p>\n\n\n\n Additionally, you can create various menu themes and customize them to your liking. <\/p>\n\n\n\n The menu theme customization includes a huge variety of options.<\/p>\n\n\n\n If necessary, you may add icons to the menu items (in our case – next to the About Us title).<\/p>\n\n\n\n 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.<\/p>\n\n\n\n The Max Mega Menu also has a Pro version with three types of licenses: <\/p>\n\n\n\n The features that you\u2019ll find in the Pro version are:<\/p>\n\n\n\n WP Mega Menu<\/a> 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n As shown in the screenshot above, theme settings have numerous options that you can change. Let\u2019s look at some of them.<\/p>\n\n\n\n There are also settings for the mobile menu, social links, and custom CSS\/JS styles.<\/p>\n\n\n\n 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\u2019ll see the Mega Menu Settings. Enable the mega menu and tick the theme you want to use.<\/p>\n\n\n\n After saving the changes, you can preview your WordPress dropdown menus and continue the customization process if necessary.<\/p>\n\n\n\n The plugin also has a pro version that includes:<\/p>\n\n\n\n The annual payment is:<\/p>\n\n\n\n WordPress Mega Menu \u2013 QuadMenu<\/a> 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.<\/p>\n\n\n\n We must mention that this plugin doesn\u2019t always support automatic integration into any WordPress theme. However, you can use it after manual integration. \u2018If 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,\u2019 the plugin warns. You\u2019ll see the instructions on manual integration in the plugin\u2019s options after activating it.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n To be precise, you can customize the menu layout, items alignment, dropdown trigger, colors (usual and on hover), links, icons, buttons, etc. It\u2019s possible to change many parameters, such as height, margins, padding, etc.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n The title of this plugin is \u2018Mega Menu\u2019, and it does help create mega menus. It\u2019s possible to set the number of columns, choose the mega menu layout, and add the necessary items to the lists. <\/p>\n\n\n\n In the screenshot, you can see a two-column mega menu with blog categories.<\/p>\n\n\n\n The pro version of the plugin includes the following additional features:<\/p>\n\n\n\n You can choose from 3 plans:<\/p>\n\n\n\n All plans include lifetime updates and personalized support.<\/p>\n\n\n\n As WordPress has built-in options to manage website navigation, we recommend mastering this functionality. Arranging menus doesn\u2019t require many skills, and dragging elements to create submenus is pretty straightforward.<\/p>\n\n\n\n WordPress lets you see the changes in your dropdown menus when using the Live Preview. Thus, you don\u2019t have to switch between the customization dashboard and the website page to make sure you like the edits.<\/p>\n\n\n\n Even with the inherent WordPress functions, it\u2019s possible to make dropdown lists that include several levels. Apply the same principle of dragging elements to the right, and you\u2019ll get a multi-level menu.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n 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.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n 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.\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n 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\u2019s look.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n First, it\u2019s necessary to ensure that your WordPress theme supports dropdown menus. Second, if you want to use plugins to adjust your dropdowns, check that it\u2019s compatible with the theme you are using. In some cases, you\u2019ll need to activate the plugin manually.<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n<\/div>\n\n\n\n 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<\/a> can help. With 16+ years of industry experience and thousands of successfully completed WP projects, we know everything about the world\u2019s most popular CMS.<\/em><\/p>\n\n\n\n Reach out to <\/a>us with any WordPress-related request, from building a custom theme or tweaking your current one to Core Web Vitals optimization and plugin development.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":" 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. <\/p>\n","protected":false},"author":4,"featured_media":14149,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"advgb_blocks_editor_width":"","advgb_blocks_columns_visual_guide":"","footnotes":""},"categories":[740,752],"tags":[774,825,814],"class_list":["post-14140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","category-wordpress-development","tag-cms-development","tag-html-css","tag-wordpress"],"acf":[],"aioseo_notices":[],"author_meta":{"display_name":"Dmytro Mashchenko","author_link":"https:\/\/getdevdone.com\/blog\/author\/dima"},"featured_img":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8-300x300.png","coauthors":[],"tax_additional":{"categories":{"linked":["Tutorial<\/a>","WordPress development<\/a>"],"unlinked":["Tutorial<\/span>","WordPress development<\/span>"]},"tags":{"linked":["CMS development<\/a>","HTML & CSS<\/a>","WordPress<\/a>"],"unlinked":["CMS development<\/span>","HTML & CSS<\/span>","WordPress<\/span>"]}},"comment_count":"0","relative_dates":{"created":"Posted 4 years ago","modified":"Updated 1 year ago"},"absolute_dates":{"created":"Posted on March 24, 2022","modified":"Updated on March 30, 2025"},"absolute_dates_time":{"created":"Posted on March 24, 2022 1:59 pm","modified":"Updated on March 30, 2025 10:37 pm"},"featured_img_caption":"","series_order":"","featured_image_urls":{"thumbnail_723x315":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8-400x315.png","thumbnail_723x315-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8.png","thumbnail_723x315-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8.png","thumbnail_770x510":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8.png","thumbnail_770x510-2x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8.png","thumbnail_770x510-3x":"https:\/\/s3.amazonaws.com\/newblog.psd2html.com\/wp-content\/uploads\/2022\/03\/24132406\/Intro-preview-8.png"},"featured_post_color":"#e88080","author_avatar":"https:\/\/secure.gravatar.com\/avatar\/97bd036a871c68c70de0956108719ad9489849769ee15e25e0bee81f3bdd7286?s=96&d=mm&r=g","author_position":"CEO of GetDevDone","reading_time":"<\/span> 11<\/span> min read<\/span><\/span>","prev_post":{"slug":"embedding-youtube-videos-in-wordpress-best-practices","name":"Embedding YouTube Videos in WordPress: Best Practices"},"next_post":{"slug":"how-to-make-your-shopify-store-more-mobile-friendly","name":"Shopify Mobile Optimization: How to Optimize a Shopify Store for Mobile"},"related_posts":["hiring-wordpress-website-development-company","favicon-creation","easy-ways-to-change-wordpress-upload-limit"],"_links":{"self":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/comments?post=14140"}],"version-history":[{"count":54,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14140\/revisions"}],"predecessor-version":[{"id":24621,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/posts\/14140\/revisions\/24621"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media\/14149"}],"wp:attachment":[{"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/media?parent=14140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/categories?post=14140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/getdevdone.com\/blog\/wp-json\/wp\/v2\/tags?post=14140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
\n
2. WP Mega Menu<\/h3>\n\n\n\n
\n
\n
\n
3. WordPress Mega Menu \u2013 QuadMenu<\/h3>\n\n\n\n
\n
\n
Tips on Creating WordPress Dropdown Menus<\/h2>\n\n\n\n
1. Take Advantage of WordPress Inherent Functions<\/h3>\n\n\n\n
2. Use Live Preview<\/h3>\n\n\n\n
3. Create Multi-Level Menus <\/h3>\n\n\n\n
4. Add Multiple Dropdown Menus<\/h3>\n\n\n\n
5. Install Plugins for Extra Customization<\/h3>\n\n\n\n
FAQs on Creating WordPress Dropdown Menus<\/h2>\n
What are the ways to add WordPress dropdown menus?<\/h3>\n
What items can you add to a dropdown menu in WordPress?<\/h3>\n
Is it difficult to customize dropdown menus in WordPress?<\/h3>\n
What should you check when creating dropdown menus?<\/h3>\n
\n\n\n\nTop-Notch WordPress Development Services from GetDevDone<\/h2>\n\n\n\n