{"id":2583,"date":"2022-07-21T16:18:22","date_gmt":"2022-07-21T20:18:22","guid":{"rendered":"https:\/\/basicwebguide.com\/?p=2583"},"modified":"2022-07-21T16:18:22","modified_gmt":"2022-07-21T20:18:22","slug":"how-to-create-a-drop-down-menu-in-wordpress","status":"publish","type":"post","link":"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/","title":{"rendered":"How To Create A Drop Down Menu In WordPress?"},"content":{"rendered":"<p>Navigation, including drop-down menus, plays a pivotal role in retaining users. So, today, we will learn <strong>how to create a drop down menu in WordPress?<\/strong> Or the best method is to add a drop down menu to a website.<\/p>\n<p>Indeed, poor navigation of a website severely hits its performance even if it has excellent content or information.<\/p>\n<p>Users may simply explore diverse material thanks to interactive menus, which also help <strong>increase user engagement<\/strong> on the website.<\/p>\n<p>I will discuss an easy way to add a dropdown menu to your WordPress website. If you are <strong>a beginner<\/strong> and just starting out on a website, this article is going to be <strong>very helpful<\/strong> for you. So let&#8217;s begin with how to create a drop down menu in WordPress?<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_61 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#What_is_a_drop_down_menu_and_why_do_you_need_one\" title=\"What is a drop down menu, and why do you need one?\">What is a drop down menu, and why do you need one?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#How_To_Create_A_Drop_Down_Menu_In_WordPress_Without_Plugin\" title=\"How To Create A Drop Down Menu In WordPress Without Plugin?\">How To Create A Drop Down Menu In WordPress Without Plugin?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#Step_1_Selecting_a_compatible_theme_for_the_dropdown_menu\" title=\"Step 1. Selecting a compatible theme for the dropdown menu\">Step 1. Selecting a compatible theme for the dropdown menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#Step_2_Create_a_navigation_menu_in_WordPress\" title=\"Step 2. Create a navigation menu in WordPress\">Step 2. Create a navigation menu in WordPress<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#Step_3_Organize_parent_menus_and_submenu\" title=\"Step 3. Organize parent menus and submenu\">Step 3. Organize parent menus and submenu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#Step_4_Publish_the_menu\" title=\"Step 4. Publish the menu\">Step 4. Publish the menu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#How_To_Create_A_Drop_Down_Menu_In_WordPress_With_Plugin\" title=\"How To Create A Drop Down Menu In WordPress With Plugin?\">How To Create A Drop Down Menu In WordPress With Plugin?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/basicwebguide.com\/how-to-create-a-drop-down-menu-in-wordpress\/#Final_Thoughts\" title=\"Final Thoughts\">Final Thoughts<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_a_drop_down_menu_and_why_do_you_need_one\"><\/span><strong>What is a drop down menu, and why do you need one?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Links to the site&#8217;s primary pages may be found in the <strong>navigation menus<\/strong>, which are often shown at the <strong>top of your website<\/strong> in a horizontal row\u00a0or in the <strong>sidebar<\/strong>.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example.jpg\"><img fetchpriority=\"high\" decoding=\"async\" class=\"aligncenter size-full wp-image-2585\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example.jpg\" alt=\"how to create a drop down menu in WordPress\" width=\"1146\" height=\"397\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example.jpg 1146w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example-300x104.jpg 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example-1024x355.jpg 1024w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/dropdown-menu-example-768x266.jpg 768w\" sizes=\"(max-width: 1146px) 100vw, 1146px\" \/><\/a><\/p>\n<p>The dropdown menu has multiple submenus related to the <strong>specific category<\/strong>. For example, if there is a main category named &#8220;men,&#8221; then men&#8217;s watches, men&#8217;s shoes, etc., could be submenus. All these <strong>navigation links<\/strong> are collectively known as the dropdown menu.<\/p>\n<p>The very first reason to have a <strong>drop-down menu<\/strong> is to improve navigation and user engagement. Second, if your website is large, a dropdown menu can save a large space and occupy a <strong>lot of information in a limited space.<\/strong><\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_To_Create_A_Drop_Down_Menu_In_WordPress_Without_Plugin\"><\/span><strong>How To Create A Drop Down Menu In WordPress Without Plugin?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Adding a dropdown menu to a website is not a daunting task nowadays. WordPress offers a number of ways to do so. However, the feature and structure of your dropdown menu greatly depend on the <a href=\"https:\/\/basicwebguide.com\/how-to-find-out-what-wordpress-theme-a-site-is-using\/\">theme you are using<\/a>.<\/p>\n<p>Almost every theme allows creating a dropdown menu on your WordPress website; however, it is recommended to use a compatible theme. Let&#8217;s look <strong>step-by-step<\/strong> at how to create a drop down menu in WordPress?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Step_1_Selecting_a_compatible_theme_for_the_dropdown_menu\"><\/span><strong>Step 1. Selecting a compatible theme for the dropdown menu<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As already stated, not all themes support dropdown menus, especially at the top side. So, it is wise to select a good one at the time you<a href=\"https:\/\/basicwebguide.com\/how-to-create-a-wordpress-account\/\"> started your WordPress website<\/a> or blog.<\/p>\n<p>Finding the theme information is the <strong>ideal technique<\/strong> to locate a dropdown-supported theme. A link to the <strong>theme&#8217;s demo<\/strong> is available on the theme&#8217;s website, which you may access directly.<\/p>\n<p>From there, you may check to see if the example is displaying a dropdown menu in the settings window.<\/p>\n<p>Popular themes that have <strong>premium and impressive dropdown<\/strong> menu options are mentioned here. Best <strong>top 10 dropdown menu<\/strong> supported themes:<\/p>\n<ol>\n<li><a href=\"https:\/\/wpastra.com\/\" target=\"_blank\" rel=\"noopener\">Astra<\/a><\/li>\n<li>OceanWP<\/li>\n<li>StudioPress<\/li>\n<li>Ultra<\/li>\n<li>Liberte<\/li>\n<li>Wookiee<\/li>\n<li>Cerato<\/li>\n<li>Origine<\/li>\n<li>Mogo<\/li>\n<li>Digitech<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Step_2_Create_a_navigation_menu_in_WordPress\"><\/span><strong>Step 2. Create a navigation menu in WordPress<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The 2nd step for how to create a dropdown menu in WordPress is to add a navigation menu which will be the <strong>main menu<\/strong>.<\/p>\n<ul>\n<li>Go to the Appearance section from your WordPress dashboard, then click on Menus.<\/li>\n<li>Click on the <strong>create a new menu<\/strong> from the next screen.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/create-a-new-menu.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2590\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/create-a-new-menu.jpg\" alt=\"how to create a dropdown menu in WordPress\" width=\"847\" height=\"252\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/create-a-new-menu.jpg 847w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/create-a-new-menu-300x89.jpg 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/create-a-new-menu-768x228.jpg 768w\" sizes=\"(max-width: 847px) 100vw, 847px\" \/><\/a><\/p>\n<ul>\n<li>Now, give a name to the new menu and click on the create menu at the right bottom.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-2592\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu.jpg\" alt=\"add a dropdown menu to wordpress\" width=\"1138\" height=\"550\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu.jpg 1138w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu-300x145.jpg 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu-1024x495.jpg 1024w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/name-the-menu-768x371.jpg 768w\" sizes=\"(max-width: 1138px) 100vw, 1138px\" \/><\/a><\/p>\n<ul>\n<li>An empty menu will be created for WordPress. Now, you can <strong>add links<\/strong> to the menu.<\/li>\n<li>From the left side of the screen, you can select as many links as you want.<\/li>\n<\/ul>\n<p style=\"text-align: center;\"><a href=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/manage-dropdown-menu.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2594\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/manage-dropdown-menu.jpg\" alt=\"how to create dropdown menu in wordpress\" width=\"952\" height=\"556\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/manage-dropdown-menu.jpg 952w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/manage-dropdown-menu-300x175.jpg 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/manage-dropdown-menu-768x449.jpg 768w\" sizes=\"(max-width: 952px) 100vw, 952px\" \/><\/a><\/p>\n<ul>\n<li>Click on the<strong> add to menu<\/strong> button after selecting links. The links will be added to the right side and appear on the main menu.<\/li>\n<li>Similarly, <strong>select sub-menus<\/strong> from the left and add them to the main menu.<\/li>\n<li>You can even add blog posts, links, pages, etc. as menu or submenu.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_3_Organize_parent_menus_and_submenu\"><\/span><strong>Step 3. Organize parent menus and submenu<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Once you have added different links to the menu, these items appear as regular links. Now you have to <strong>make them as parent menu<\/strong> and submenu by following the below steps:<\/p>\n<ul>\n<li>The links, that were added on the right side, can move up and down.<\/li>\n<li>Just <strong>drag and drop<\/strong> any item next to the main link to make it a submenu.<\/li>\n<li>Repeat this for all the items that you want to make subitems.<\/li>\n<li>Finally, click on the Save menu button.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Step_4_Publish_the_menu\"><\/span><strong>Step 4. Publish the menu<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If you editing an already created menu, then this step is not useful for you except for updating previous steps. But if you are making a fresh start, you need to <strong>set the menu location<\/strong>, whether it appears at the header or footer.<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/menu-location.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2597\" src=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/menu-location.jpg\" alt=\"how to add a dropdown menu in WordPress\" width=\"826\" height=\"348\" srcset=\"https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/menu-location.jpg 826w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/menu-location-300x126.jpg 300w, https:\/\/basicwebguide.com\/wp-content\/uploads\/2022\/07\/menu-location-768x324.jpg 768w\" sizes=\"(max-width: 826px) 100vw, 826px\" \/><\/a><\/p>\n<p>Scroll down the menu screen, and you will find <strong>Menu Settings<\/strong>. You can checkmark the boxes where you want to show your links. At the final, click on the <strong>save menu<\/strong> button.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_To_Create_A_Drop_Down_Menu_In_WordPress_With_Plugin\"><\/span><strong>How To Create A Drop Down Menu In WordPress With Plugin?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Though the above method is the <strong>best and easiest<\/strong> to create a dropdown menu in WordPress. Yet if you don&#8217;t want to go through the long haul process, I suggest you use the below-mentioned WordPress plugins.<\/p>\n<ul>\n<li>Hero menu.<\/li>\n<li>Max mega menu.<\/li>\n<li>Quad menu.<\/li>\n<li>Groovy Menu.<\/li>\n<li>Uber menu.<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Final_Thoughts\"><\/span><strong>Final Thoughts<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In this article, we have learned <strong>how to create a dropdown menu in WordPress without plugins<\/strong> and with plugins. You can see, that it doesn&#8217;t require any coding skills or being tech-savvy (until you want to create a custom menu).<\/p>\n<p>We have discussed the<strong> easiest way to create a dropdown menu<\/strong> using the default features of WordPress. To speed up the menu-creating procedure, you can take the help of mentioned plugins. I hope this article will help you, especially if you are a beginner.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Navigation, including drop-down menus, plays a pivotal role in retaining users. So, today, we will learn how to create a drop down menu in WordPress? Or the best method is to add a drop down menu to a website. Indeed, poor navigation of a website severely hits its performance even if it has excellent content [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2604,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[362],"tags":[2949,2948,2957,2947,2953,2950,2951,2958,2946,2952,609,2956,2959,2954,2955,614],"_links":{"self":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/2583"}],"collection":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/comments?post=2583"}],"version-history":[{"count":9,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/2583\/revisions"}],"predecessor-version":[{"id":2606,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/posts\/2583\/revisions\/2606"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/media\/2604"}],"wp:attachment":[{"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/media?parent=2583"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/categories?post=2583"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/basicwebguide.com\/wp-json\/wp\/v2\/tags?post=2583"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}