{"id":36300,"date":"2021-12-09T12:48:18","date_gmt":"2021-12-09T07:03:18","guid":{"rendered":"https:\/\/rarathemes.com\/blog\/?p=36300"},"modified":"2022-01-03T13:03:33","modified_gmt":"2022-01-03T07:18:33","slug":"add-drop-down-menu-wordpress","status":"publish","type":"post","link":"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/","title":{"rendered":"How to Add Drop-Down Menu in WordPress &#8211; Beginner&#8217;s Guide"},"content":{"rendered":"\n<p>Adding drop-down menus in WordPress is a neat way of displaying the list of items on your site. They make your site look organized, give a techy touch to the overall appearance, and make your website highly navigable for users.&nbsp;<\/p>\n\n\n\n<p>The best part &#8211; it only takes a few minutes to learn how to add drop-down menus in WordPress.&nbsp;<\/p>\n\n\n\n<p><em>Isn\u2019t it exciting?&nbsp;<\/em><\/p>\n\n\n\n<p>In this short beginner\u2019s guide, we will explain what drop-down menus are, how they work, and how you can create a drop-down for your website. To finish it up, you will also learn how to edit drop-down menus to fit your needs.&nbsp;<\/p>\n\n\n\n<p>So, without further ado, let\u2019s get learning.&nbsp;<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_76 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 ez-toc-toggle\" style=\"cursor:pointer\">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:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#What_is_a_Drop-down_Menu_in_WordPress\" >What is a Drop-down Menu in WordPress&nbsp;?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Why_Should_You_Use_Drop-down_Menus_in_WordPress\" >Why Should You Use Drop-down Menus in WordPress?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#How_to_Add_Drop-Down_Menus_in_WordPress\" >How to Add Drop-Down Menus in WordPress?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Step_1_Creating_a_WordPress_Menu\" >Step 1: Creating a WordPress Menu&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Step_2_Adding_Items_to_the_Menu_You_Created\" >Step 2: Adding Items to the Menu You Created<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Step_3_Creating_Drop-down_Menus_by_Arranging_Sub-Items\" >Step 3: Creating Drop-down Menus by Arranging Sub-Items<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Step_4_Publishing_Your_New_Drop-Down_Menu\" >Step 4: Publishing Your New Drop-Down Menu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#How_to_Edit_Drop-Down_Menu_in_WordPress\" >How to Edit Drop-Down Menu in WordPress<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#1_Removing_a_Sub-Item_for_the_Drop-Down_Menu\" >1. Removing a Sub-Item for the Drop-Down Menu<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#2_Reordering_the_Items\" >2. Reordering the Items<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#3_Removing_the_Drop-Down_Menu\" >3. Removing the Drop-Down Menu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Some_Useful_Tips_to_Create_Interactive_Drop_Down_Menu\" >Some Useful Tips to Create Interactive Drop Down Menu<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#1_Creating_Multi-Level_Drop_Down_Menus\" >1. Creating Multi-Level Drop Down Menus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#2_Creating_Multiple_Drop-down_Menus\" >2. Creating Multiple Drop-down Menus<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#3_Creating_Menus_with_Live_Preview\" >3. Creating Menus with Live Preview&nbsp;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#4_Creating_a_Large_Drop-Down_Mega_Menu\" >4. Creating a Large Drop-Down Mega Menu<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rarathemes.com\/blog\/add-drop-down-menu-wordpress\/#Wrapping_Up\" >Wrapping Up<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Drop-down_Menu_in_WordPress\"><\/span>What is a Drop-down Menu in WordPress&nbsp;?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A drop-down menu is basically a part of the menu management system that adds links to the navigation menus. If you are unaware of the navigation menus, they are the links to your website\u2019s main pages. They are usually located at the top of the page, as in the example below:&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"78\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/navigation-menu-example.png\" alt=\"navigation menu example\" class=\"wp-image-36310\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/navigation-menu-example.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/navigation-menu-example-300x33.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/navigation-menu-example-538x60.png 538w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>Since adding multiple links on the navigation menus may seem messy and congested, drop-down menus help arrange things neatly. You can add multiple links to the navigation menu and show your visitors what you are offering using the drop-down menus. Visitors will see the menu link when they hover over the primary menu, as in the following example:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"415\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/example-of-drop-down-menus.png\" alt=\"example of drop-down menus\" class=\"wp-image-36309\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/example-of-drop-down-menus.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/example-of-drop-down-menus-300x178.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/example-of-drop-down-menus-101x60.png 101w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>So as you can see, adding drop-down menus lets you save the limited-space issue and give an organized look to your WordPress website.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Should_You_Use_Drop-down_Menus_in_WordPress\"><\/span>Why Should You Use Drop-down Menus in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>If you have a brand new WordPress site and are just getting started with a new blog, you may not have many web pages. But as your site grows, you start adding multiple content and products. Then, you need to add more menus to your website for a better browsing experience.&nbsp;<\/p>\n\n\n\n<p>However, too many menus lined up seem messy and somewhat unprofessional. Also, you cannot miss out on including them as well. This is where you need the drop-down menus.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Drop-down menus will help you add the items without cluttering the navigation menus. They let you efficiently utilize the limited space.&nbsp;<\/p>\n\n\n\n<p>Here are the main reasons to use drop-down menus in WordPress:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>They let you organize the items neatly on the navigation menu.&nbsp;<\/li><li>You can efficiently utilize the space.<\/li><li>Drop-down menus make your site look more detailed and professional.<\/li><li>You can arrange the menus based on the hierarchy of topics.<\/li><li>It makes your website highly navigable and enhances the browsing experience.&nbsp;<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Add_Drop-Down_Menus_in_WordPress\"><\/span>How to Add Drop-Down Menus in WordPress?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Creating and adding drop-down menus is easy. With a few clicks here and there in WordPress, you can do it in just a few minutes. Here are the steps:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Creating_a_WordPress_Menu\"><\/span>Step 1: Creating a WordPress Menu&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>First, you need to create the menu to add it to your navigation menus. Here is how to do it:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Log in to your WordPress dashboard.&nbsp;<\/li><li>Go to the <strong>\u201cAppearance\u201d<\/strong> and click on the <strong>\u201cMenus\u201d<\/strong> option.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"392\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu.png\" alt=\"Go to menu\" class=\"wp-image-31891\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu.png 669w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu-300x176.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/02\/goto-menu-102x60.png 102w\" sizes=\"auto, (max-width: 669px) 100vw, 669px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>You will see a \u201c<strong>Create a New Menu\u201d<\/strong> link at the top. Click on it.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"403\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/create-a-new-menu-option-in-WordPress.png\" alt=\"create a new menu option in WordPress\" class=\"wp-image-36308\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/create-a-new-menu-option-in-WordPress.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/create-a-new-menu-option-in-WordPress-300x173.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/create-a-new-menu-option-in-WordPress-104x60.png 104w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Enter the menu name in the given field and click on the <strong>\u201cCreate Menu\u201d<\/strong> button below.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"436\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-a-menu-name-and-create-a-new-menu.png\" alt=\"add a menu name and create a new menu\" class=\"wp-image-36307\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-a-menu-name-and-create-a-new-menu.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-a-menu-name-and-create-a-new-menu-300x187.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-a-menu-name-and-create-a-new-menu-96x60.png 96w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<p>After doing this, WordPress creates a new menu for you. However, it is an empty menu. You still need to add items to your menu. For that, let\u2019s move on to the second step.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Adding_Items_to_the_Menu_You_Created\"><\/span>Step 2: Adding Items to the Menu You Created<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>After creating a new menu, you should now add items to it. Menu items are simply the links to various pages or sections on your website. Such links make it easier for visitors to navigate around your site. Here is how you add items to the menu:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>To the left side, you will see a section named <strong>\u201cAdd Menu Items.\u201d<\/strong> In that section, you will see a list of pages that you can add to the menu.&nbsp;<\/li><li>Select the pages you want to add to the menu you created.&nbsp;<\/li><li>After that, click on the <strong>\u201cAdd to Menu\u201d<\/strong> button below.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"698\" height=\"371\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-pages-to-the-menu-in-WordPress.png\" alt=\"add pages to the menu in WordPress\" class=\"wp-image-36313\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-pages-to-the-menu-in-WordPress.png 698w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-pages-to-the-menu-in-WordPress-300x159.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/add-pages-to-the-menu-in-WordPress-113x60.png 113w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>You will see the pages you selected appear in the <strong>\u201cMenu Structure\u201d<\/strong> section.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><li>You can also add posts, landing pages, custom links, and other options to your menu. Instead of the <strong>\u201cPages,\u201d<\/strong> expand the respective section from the <strong>\u201cAdd Menu Items\u201d <\/strong>section. Then, add it to your menu as you did earlier.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"489\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/various-items-you-can-add-on-the-menu-in-WordPress.png\" alt=\"various items you can add on the menu in WordPress\" class=\"wp-image-36312\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/various-items-you-can-add-on-the-menu-in-WordPress.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/various-items-you-can-add-on-the-menu-in-WordPress-300x210.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/various-items-you-can-add-on-the-menu-in-WordPress-86x60.png 86w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the <strong>\u201cSave Menu\u201d<\/strong> button at the bottom once you are done.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Creating_Drop-down_Menus_by_Arranging_Sub-Items\"><\/span>Step 3: Creating Drop-down Menus by Arranging Sub-Items<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>After adding the pages\/posts\/custom links to the <strong>\u201cMenu Structure,\u201d<\/strong> you need to make it a drop-down. Otherwise, all those items will appear as regular items in the navigation menu. You can create a drop-down menu by using the parent-child structure.<\/p>\n\n\n\n<p>The parent item is the main heading item that will host the sub-items. Likewise, the child items are those links that appear once the user hovers over the parent item. Here is how you do it:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the item that you want to make the child item.<\/li><li>Now drag it under the item that you want to make the parent. However, make sure to drop the child item slightly towards the right.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"693\" height=\"554\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/creating-parent-item-and-child-item-in-WordPress.gif\" alt=\"creating parent item and child item in WordPress\" class=\"wp-image-36316\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>WordPress assigns the <strong>\u201csub-item\u201d<\/strong> tag to the child item you just created. You can add as many sub-items as you want on the respective parent item. After you are done, click on the <strong>\u201cSave Menu\u201d<\/strong> button below.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Publishing_Your_New_Drop-Down_Menu\"><\/span>Step 4: Publishing Your New Drop-Down Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Even after creating the drop-down menu in <strong>\u201cMenu Structure,\u201d<\/strong> it will still not appear on your website. It is because you have only created the menu and have not yet published it. Thus, you need to publish it.<\/p>\n\n\n\n<p>Here is how you do it:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>After adding all the items in the menu, scroll down. You can find <strong>Menu Settings<\/strong> at the bottom.<\/li><li>You will see a \u201c<strong>Display Location\u201d<\/strong> then click on the \u201c<strong>Primary Menu<\/strong>.\u201d<\/li><li>Click on the <strong>\u201cSave Changes\u201d<\/strong> button below.<\/li><li>The drop-down menu now appears on your site.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"327\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Publishing-Your-New-Drop-Down-Menu.png\" alt=\"Publishing Your New Drop-Down Menu\" class=\"wp-image-36322\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Publishing-Your-New-Drop-Down-Menu.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Publishing-Your-New-Drop-Down-Menu-300x140.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Publishing-Your-New-Drop-Down-Menu-128x60.png 128w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_Edit_Drop-Down_Menu_in_WordPress\"><\/span>How to Edit Drop-Down Menu in WordPress<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You have learned how to add drop-down menus in WordPress. With time, you may need to make changes to it. Here is how you can edit the menu you created:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Removing_a_Sub-Item_for_the_Drop-Down_Menu\"><\/span>1. Removing a Sub-Item for the Drop-Down Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>To remove an item from the drop-down menu, follow these steps:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to <strong>Appearance &gt; Menus <\/strong>on your WordPress<\/li><li>Make sure that you are on the <strong>\u201cEdit Menus\u201d<\/strong> tab.<\/li><li>In the <strong>\u201cMenu structure,\u201d<\/strong> click on the drop-down arrow by the side of the item you want to remove.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"503\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/selecting-an-item-to-delete-from-the-menu.gif\" alt=\"\" class=\"wp-image-36321\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Click on the <strong>\u201cRemove\u201d<\/strong> link.&nbsp;<\/li><li>Save the changes.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Reordering_the_Items\"><\/span>2. Reordering the Items<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you need to rearrange the order of the menu items, follow these steps:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>First, drag the item to position it where you want from the menu editor.<\/li><li>Simply drop the item. Save the changes once you\u2019re satisfied.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"532\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/drag-and-drop-the-menu-to-reorder.gif\" alt=\"drag and drop the menu to reorder\" class=\"wp-image-36323\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Removing_the_Drop-Down_Menu\"><\/span>3. Removing the Drop-Down Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>In case you want to remove the whole menu:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Select the menu that you want to delete from WordPress.&nbsp;<\/li><li>You will see a <strong>\u201cDelete Menu\u201d<\/strong> option at the bottom. Click on it.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"701\" height=\"406\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/deleting-a-menu.png\" alt=\"deleting a menu\" class=\"wp-image-36324\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/deleting-a-menu.png 701w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/deleting-a-menu-300x174.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/deleting-a-menu-104x60.png 104w\" sizes=\"auto, (max-width: 701px) 100vw, 701px\" \/><\/figure>\n\n\n\n<p>Simple as that!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Some_Useful_Tips_to_Create_Interactive_Drop_Down_Menu\"><\/span>Some Useful Tips to Create Interactive Drop Down Menu<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The Navigation Menus are user-friendly features to have on your site. Users can easily find what they are looking for without wasting any time. So, using navigation menus correctly on your site will help readers find their way around your site. <\/p>\n\n\n\n<p>Here are a few tips on creating interactive and structured Drop Down Menus for your website:&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_Creating_Multi-Level_Drop_Down_Menus\"><\/span>1. Creating Multi-Level Drop Down Menus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can also add an item under another sub-item to create multi-level drop-down menus. Such menus are commonly found on e-commerce websites or websites with many pages.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"698\" height=\"470\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Creating-multi-level-drop-down-menus.png\" alt=\"Creating multi-level drop-down menus\" class=\"wp-image-36328\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Creating-multi-level-drop-down-menus.png 698w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Creating-multi-level-drop-down-menus-300x202.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Creating-multi-level-drop-down-menus-89x60.png 89w\" sizes=\"auto, (max-width: 698px) 100vw, 698px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_Creating_Multiple_Drop-down_Menus\"><\/span>2. Creating Multiple Drop-down Menus<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>You can create multiple drop-down menus in your main menu bar to link various pages of your site.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"463\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/multiple-drop-down-menus.png\" alt=\"multiple drop-down menus\" class=\"wp-image-36329\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/multiple-drop-down-menus.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/multiple-drop-down-menus-300x198.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/multiple-drop-down-menus-91x60.png 91w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_Creating_Menus_with_Live_Preview\"><\/span>3. Creating Menus with Live Preview&nbsp;<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Many WordPress themes offer a customizer that gives a live preview while customizing the theme. Creating your site menus with a live preview will give you a vivid idea of how it will look in the front-end.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Go to the <strong>Appearance &gt; Customize<\/strong> option on your WordPress dashboard to access the customizer.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"686\" height=\"383\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Customize-setting-.png\" alt=\"Customize setting\" class=\"wp-image-32025\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Customize-setting-.png 686w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Customize-setting--300x167.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/01\/Customize-setting--107x60.png 107w\" sizes=\"auto, (max-width: 686px) 100vw, 686px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>You will see the <strong>Menus <\/strong>option on the customizer. The location of this option may vary according to the theme you use.&nbsp;<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"518\" src=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Menus-option-on-the-customizer.png\" alt=\"Menus option on the customizer\" class=\"wp-image-36332\" srcset=\"https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Menus-option-on-the-customizer.png 700w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Menus-option-on-the-customizer-300x222.png 300w, https:\/\/rarathemes.com\/blog\/wp-content\/uploads\/2021\/12\/Menus-option-on-the-customizer-81x60.png 81w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li>Here you will find the option to create a new menu or drag the menus to make it primary, secondary, or tertiary. Adding, removing, and ordering menu items is the same as explained in the above steps.<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_Creating_a_Large_Drop-Down_Mega_Menu\"><\/span>4. Creating a Large Drop-Down Mega Menu<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The general drop-down menus only show a limited sub-menus. However, you can also show the full structure of your site when users hover over the main menu. Here are the steps:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>First, you need to download and install the one of the<strong> Mega Menu<\/strong> plugin from wordpress.org. Then, activate the plugin.&nbsp;<\/li><li>Go to the<strong> setting<\/strong> option of the plugin and make necessary changes.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Wrapping_Up\"><\/span>Wrapping Up<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You see, it only takes a few clicks and some minutes to add a drop-down menu in WordPress. However, the number and location of the menus you can add may differ from theme to theme. So, make sure to choose the right one for your site rather than just opting for a popular theme.<\/p>\n\n\n\n<p>Nevertheless, adding drop-down menus is a great way to improve the browsing experience for your users. They make your site look well-organized as well as ease the navigation around your website.<\/p>\n\n\n\n<p>We hope you found this beginner\u2019s guide helpful. Make sure to write your feedback in the comment section below.&nbsp;<\/p>\n\n\n\n<p>You may also check <a href=\"https:\/\/rarathemes.com\/blog\/how-to-add-widgets-to-wordpress\/\">how to add widgets to WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding drop-down menus in WordPress is a neat way of displaying the list of items on your site. They make your site look organized, give a techy touch to the &hellip; <\/p>\n","protected":false},"author":15,"featured_media":36465,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_be_single_description":"","_be_image_uploader":0,"_be_meta_button_label":"","_be_meta_button_url":"","_be_meta_button_newtab":false,"_be_meta_rel_attribute":"","footnotes":""},"categories":[3],"tags":[],"class_list":["post-36300","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","latest_post"],"_links":{"self":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/36300","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/comments?post=36300"}],"version-history":[{"count":0,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/posts\/36300\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media\/36465"}],"wp:attachment":[{"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/media?parent=36300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/categories?post=36300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rarathemes.com\/blog\/wp-json\/wp\/v2\/tags?post=36300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}