{"id":97165,"date":"2024-04-20T09:00:00","date_gmt":"2024-04-20T13:00:00","guid":{"rendered":"https:\/\/www.crazyegg.com\/blog\/?p=97165"},"modified":"2026-01-06T15:13:49","modified_gmt":"2026-01-06T23:13:49","slug":"dropdown-menus-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/","title":{"rendered":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress"},"content":{"rendered":"\n<p>A dropdown menu is a graphical user interface (GUI) element on a website that reveals additional navigation options whenever a user clicks on or hovers over a menu item. Its primary purpose is to prevent clutter while keeping a website\u2019s menus organized, accessible, and user-friendly.<\/p>\n\n\n\n<p>To create dropdown menus for WordPress (WP), you first need to create a main navigation menu\u2014which is typically your site\u2019s main header menu, but it can also be a footer menu or another additional menu.&nbsp;<\/p>\n\n\n\n<p>Once you\u2019ve got that in place, there are three straightforward ways to create a dropdown menu in WordPress: via the full site editor, via the WP Admin menu, and via plugins.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How To Create Dropdown Menus in WordPress With The Full Site Editor<\/h2>\n\n\n\n<p>Note: This example uses a free WordPress theme called Twenty Twenty-Three, which is compatible with the latest version of WP and also supports full site editing (FSE).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"397\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png\" alt=\"WordPress Twenty Twenty-Three theme\" class=\"wp-image-97167\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1-300x176.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>First, navigate to <strong>Appearance<\/strong> &gt;<strong> Editor<\/strong> from the left-hand side of your WordPress dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"698\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120314\/dropdown-menus-2.png\" alt=\"WordPress dashboard menu with red boxes around Appearance and Editor\" class=\"wp-image-97168\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120314\/dropdown-menus-2.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120314\/dropdown-menus-2-290x300.png 290w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Keep in mind that if you see <strong>Appearance <\/strong>&gt;<strong> Menus<\/strong> instead of <strong>Appearance<\/strong> &gt;<strong> Editor<\/strong>, it means your main WordPress theme doesn\u2019t support full site editing (FSE). In that case you may want to jump ahead to the section below for classic WordPress dropdown menu creation.<\/p>\n\n\n\n<p>Anyway, to start adding a dropdown menu with the FSE method, select <strong>Templates<\/strong> or <strong>Patterns <\/strong>from the block editor\u2019s main menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"505\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120315\/dropdown-menus-3.png\" alt=\"Twenty Twenty-Three theme previewer with red box around Templates and Patterns\" class=\"wp-image-97169\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120315\/dropdown-menus-3.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120315\/dropdown-menus-3-300x224.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>WordPress will now display all templates, template parts, and patterns featured on your site. To add a new menu, click the part with the name of the area where you want to add it. For instance, if you want to create a main navigation menu, simply select the <strong>Header<\/strong> part.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"599\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120316\/dropdown-menus-4.png\" alt=\"Twenty Twenty-Three theme with red box around Header\" class=\"wp-image-97170\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120316\/dropdown-menus-4.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120316\/dropdown-menus-4-300x266.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>The editor will show a preview of any selected part. To edit it, click the pencil icon to the right of the title\u2014or in this case, <strong>Header<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"555\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120317\/dropdown-menus-5.png\" alt=\"Twenty Twenty-Three theme preview with red box around edit pencil\" class=\"wp-image-97171\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120317\/dropdown-menus-5.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120317\/dropdown-menus-5-300x247.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>With that completed, click the plus icon in the top left-hand corner to toggle the block inserter.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"343\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120318\/dropdown-menus-6.png\" alt=\"WordPress block inserter\" class=\"wp-image-97172\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120318\/dropdown-menus-6.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120318\/dropdown-menus-6-300x152.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Type \u201cNavigation\u201d in the search bar that appears.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"428\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120319\/dropdown-menus-7.png\" alt=\"WordPress navigation block\" class=\"wp-image-97173\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120319\/dropdown-menus-7.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120319\/dropdown-menus-7-300x190.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>When the <strong>Navigation<\/strong> block appears, use the drag-and-drop method to move it to your desired location on the right-hand side in the main working area of the block editor.<\/p>\n\n\n\n<p>Next, click on the newly added menu navigation block to select it and click the <strong>Settings<\/strong> icon in the top right-hand corner. Here you can select the <strong>Gear <\/strong>icon to customize the justification, orientation, display, and mobile overlay of the menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"341\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120320\/dropdown-menus-8.png\" alt=\"WordPress settings and gear icon\" class=\"wp-image-97174\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120320\/dropdown-menus-8.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120320\/dropdown-menus-8-300x152.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>You can toggle <strong>Styles<\/strong> in the top-right-hand corner to further customize the styles, font, colors, and layout of your selected menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"335\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120321\/dropdown-menus-9.png\" alt=\"WordPress browse styles\" class=\"wp-image-97175\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120321\/dropdown-menus-9.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120321\/dropdown-menus-9-300x149.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>To add top-level items to your menu, make sure <strong>List View<\/strong> is toggled on under the main <strong>Settings<\/strong>, and then click the <strong>Plus<\/strong> button. The <strong>List View<\/strong> icon looks like three cascading lines and is located to the left of the <strong>Gear<\/strong> icon under the main <strong>Settings<\/strong> in the block editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"209\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120322\/dropdown-menus-10.png\" alt=\"WordPress list view icon\" class=\"wp-image-97176\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120322\/dropdown-menus-10.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120322\/dropdown-menus-10-300x93.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>When you\u2019re ready, click <strong>Page Link<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"888\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120323\/dropdown-menus-11.png\" alt=\"WordPress page link block\" class=\"wp-image-97177\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120323\/dropdown-menus-11.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120323\/dropdown-menus-11-228x300.png 228w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>In the prompt card that appears, start typing the name of the page you want to show up as a top-level menu item in your newly created main navigation menu. Click the corresponding title or URL once it appears under the search box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"724\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120324\/dropdown-menus-12.png\" alt=\"WordPress example page block\" class=\"wp-image-97178\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120324\/dropdown-menus-12.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120324\/dropdown-menus-12-280x300.png 280w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Repeat this step as many times as you need until you\u2019re happy with your top-level menu items. Once completed, you can move on to focus on adding submenu items. Select the menu item you want to feature a submenu, click the three dots to the right of it, and then click <strong>Add submenu link<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"677\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120325\/dropdown-menus-13.png\" alt=\"WordPress add submenu link option\" class=\"wp-image-97179\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120325\/dropdown-menus-13.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120325\/dropdown-menus-13-300x300.png 300w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120325\/dropdown-menus-13-150x150.png 150w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>When the prompt card appears, click to add your preferred submenu item with the same methods used above.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"988\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120327\/dropdown-menus-14.png\" alt=\"WordPress blog inserter\" class=\"wp-image-97180\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120327\/dropdown-menus-14.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120327\/dropdown-menus-14-205x300.png 205w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Again, repeat this step to add as many submenu items as you like. When you\u2019re happy with the number of items in your new menu, click <strong>Save<\/strong> to save your changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"248\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120328\/dropdown-menus-15.png\" alt=\"WordPress activate and save button\" class=\"wp-image-97181\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120328\/dropdown-menus-15.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120328\/dropdown-menus-15-300x110.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Keep in mind that if your FSE-compatible theme isn\u2019t active, the button will read <strong>Activate &amp; Save<\/strong> instead of just <strong>Save<\/strong>. You\u2019ll need to activate your theme and save your menu parameters to see the changes reflected on the frontend of your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Using a Classic Theme? Create Dropdown Menus In WP Admin<\/h2>\n\n\n\n<p>If you can\u2019t or don\u2019t want to use FSE, most classic WordPress themes\u2014including <a href=\"https:\/\/wordpress.org\/themes\/astra\/\" target=\"_blank\" rel=\"noreferrer noopener\">Astra<\/a>, <a href=\"https:\/\/wordpress.org\/themes\/neve\/\" target=\"_blank\" rel=\"noreferrer noopener\">Neve<\/a>, and <a href=\"https:\/\/wordpress.org\/themes\/oceanwp\/\" target=\"_blank\" rel=\"noreferrer noopener\">OceanWP<\/a>\u2014support creating dropdown menus via the WP Admin dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"564\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120329\/dropdown-menus-16.png\" alt=\"WordPress Neve theme\" class=\"wp-image-97182\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120329\/dropdown-menus-16.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120329\/dropdown-menus-16-300x251.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>To start, navigate to <strong>Appearance <\/strong>&gt;<strong> Menus<\/strong> on the left-hand side of your WordPress dashboard and click the hyperlink that reads <strong>create a new menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"407\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120330\/dropdown-menus-17.png\" alt=\"WordPress dashboard with red box around create a new menu\" class=\"wp-image-97183\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120330\/dropdown-menus-17.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120330\/dropdown-menus-17-300x181.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Next up, you\u2019ll need to create a name for your main navigation menu. Be aware that this name will be used inside the admin dashboard area, but not on your site\u2019s frontend.<\/p>\n\n\n\n<p>After naming your new menu, click the <strong>Create Menu<\/strong> button. WordPress will create a new menu for you automatically. Also, if you intend for this to be your primary menu, check the box next to <strong>Primary Menu<\/strong> in the <strong>Menu Settings<\/strong> area.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"299\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120331\/dropdown-menus-18.png\" alt=\"WordPress add menu items view with red box around create menu\" class=\"wp-image-97184\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120331\/dropdown-menus-18.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120331\/dropdown-menus-18-300x133.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Next, you\u2019ll need to add items to your new menu. These items will appear directly underneath your main navigation menu and will serve as parent links to all the other specified pages, posts, landing pages, custom links, and categories.<\/p>\n\n\n\n<p>From the left-hand column, check the box next to each item that you want to add to your new menu. Click <strong>Add to Menu<\/strong> and WordPress will automatically add your selected items to the new menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"421\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120332\/dropdown-menus-19.png\" alt=\"WordPress add menu items view with red box around save menu\" class=\"wp-image-97185\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120332\/dropdown-menus-19.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120332\/dropdown-menus-19-300x187.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Your items will now appear in the right-hand column, but they\u2019ll show up as regular menu items in the top row by default. To make them submenu items, drag and drop them under the parent menu item of your choosing. Then, move it slightly to the right for the preferred item to become a submenu item. Don\u2019t forget to click <strong>Save Menu<\/strong> to save your changes when you\u2019re done.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"558\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120333\/dropdown-menus-20.png\" alt=\"WordPress menu structure dashboard with red boxes around sample page and contact\" class=\"wp-image-97186\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120333\/dropdown-menus-20.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120333\/dropdown-menus-20-300x248.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Assuming you\u2019ve selected the new menu as your primary, secondary, or footer menu, you should now be able to visit your site and see how the menu looks on the frontend.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Best Plugins to Create Dropdown Menus in WordPress<\/h2>\n\n\n\n<p>Another easy option for creating dropdown menus in WordPress comes by way of third-party plugins that are offered directly on the platform. There are multiple menu plugins to choose from, and you can find any that you download under <strong>Plugins <\/strong>on the left-hand side of your WordPress dashboard.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"426\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120334\/dropdown-menus-21.png\" alt=\"WordPress dashboard with red box around plugins\" class=\"wp-image-97187\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120334\/dropdown-menus-21.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120334\/dropdown-menus-21-300x189.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Two solid options to give a try are Max Mega Menu and Responsive Menu. If you\u2019re concerned with WordPress Pricing, the former has a free version with basic support.\u00a0<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Max Mega Menu<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"359\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120335\/dropdown-menus-22.png\" alt=\"Max Mega Menu plugin\" class=\"wp-image-97188\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120335\/dropdown-menus-22.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120335\/dropdown-menus-22-300x160.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/megamenu\/\" target=\"_blank\" rel=\"noreferrer noopener\">Max Mega Menu<\/a> is a complete menu management solution that lets you convert your existing menus into much larger menus. Aside from creating dropdown menus, you can also add any WordPress widget to your menu, restyle it, and adjust its behavior however you see fit.<\/p>\n\n\n\n<p>Some of Max Mega Menu\u2019s main features include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Compatibility with the existing WordPress menu system<\/li>\n\n\n\n<li>Support for multiple menu locations<\/li>\n\n\n\n<li>Support for individual configurations of each menu<\/li>\n\n\n\n<li>Full customizability of menu layouts and styles<\/li>\n\n\n\n<li>Support for multiple menu transitions such as fade, fade up, slide up, and slide sub<\/li>\n<\/ul>\n\n\n\n<p>This menu-builder also supports accessibility features with built-in keyboard navigation for the following keys:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>TAB<\/strong>. Turns on keyboard navigation and navigates to the next element in the menu.<\/li>\n\n\n\n<li><strong>ENTER<\/strong>, <strong>SPACE<\/strong>. Shows or hides the submenu\u2014as long as the arrow indicator on a submenu is highlighted.<\/li>\n\n\n\n<li><strong>ESCAPE<\/strong>. Closes all submenus.<\/li>\n<\/ul>\n\n\n\n<p>To download, install, and activate the Max Mega Menu plugin, navigate to <strong>Plugins <\/strong>&gt;<strong> Add New <\/strong>&gt;<strong> Plugins<\/strong> and type \u201cMax Mega Menu\u201d in the search bar, then click <strong>Install Now <\/strong>on the corresponding plugin card.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"241\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120336\/dropdown-menus-23.png\" alt=\"WordPress Add Plugins page with red arrow pointing to Max Mega Menu\" class=\"wp-image-97189\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120336\/dropdown-menus-23.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120336\/dropdown-menus-23-300x107.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Next, go to <strong>Appearance <\/strong>&gt; <strong>Menus<\/strong>, select your preferred menu, and assign it to one of the display locations offered by WordPress. Click <strong>Save Menu<\/strong> to enable the plugin\u2019s settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"346\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120337\/dropdown-menus-24.png\" alt=\"Max Mega Menu Settings\" class=\"wp-image-97190\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120337\/dropdown-menus-24.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120337\/dropdown-menus-24-300x154.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>To activate the menu, check the box <strong>Enable<\/strong> in the left-hand column under <strong>Max Mega Menu Settings<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"405\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120338\/dropdown-menus-25.png\" alt=\"Max Mega Menu settings with red box around Enable\" class=\"wp-image-97191\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120338\/dropdown-menus-25.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120338\/dropdown-menus-25-300x180.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Next, hover over the item you want to convert to a mega menu in the right-hand column and click the blue <strong>Mega Menu<\/strong> button that appears.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"435\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120340\/dropdown-menus-26.png\" alt=\"Max Mega Menu Settings with red box around Mega Menu \" class=\"wp-image-97192\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120340\/dropdown-menus-26.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120340\/dropdown-menus-26-300x193.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Here, the submenu items should be set in the <strong>Flyout Mode<\/strong> by default. To convert them into a mega menu, click on <strong>Mega Menu &#8211; Grid Layout<\/strong>. This should cause all menu items to be displayed in the grid layout editor as fully customizable boxes\u2014which you can then drag and drop into existing or new columns and rows according to your preferences.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"349\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120341\/dropdown-menus-27.png\" alt=\"Example Page mega menu sub menu display mode \" class=\"wp-image-97193\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120341\/dropdown-menus-27.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120341\/dropdown-menus-27-300x155.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Lastly, don\u2019t forget that you can also add a variety of widgets to your mega menus as well.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"377\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120342\/dropdown-menus-28.png\" alt=\"Mega Menu with dropdown options to select a widget to add to the panel\" class=\"wp-image-97194\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120342\/dropdown-menus-28.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120342\/dropdown-menus-28-300x168.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Responsive Menu<\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"373\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120343\/dropdown-menus-29.png\" alt=\"WordPress Responsive Menu plugin\" class=\"wp-image-97195\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120343\/dropdown-menus-29.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120343\/dropdown-menus-29-300x166.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/responsive-menu\/\" target=\"_blank\" rel=\"noreferrer noopener\">Responsive Menu<\/a> is a highly customizable menu plugin for WordPress, featuring more than 150 options to create the ideal navigation for your site. The plugin comes with an intuitive user interface and it doesn\u2019t require any prior coding knowledge to use.<\/p>\n\n\n\n<p>Some of Responsive Menu\u2019s functionalities include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Full customization options for text, background, and border-color<\/li>\n\n\n\n<li>Font, font size, and text alignment customizability<\/li>\n\n\n\n<li>Multiple submenu item depth display options<\/li>\n\n\n\n<li>Multiple custom menu trigger abilities<\/li>\n\n\n\n<li>A wide range of menu animations<\/li>\n<\/ul>\n\n\n\n<p>To create new dropdown menus with Responsive Menu, go to <strong>Plugins <\/strong>&gt; <strong>Add New Plugins<\/strong> and type \u201cResponsive Menu\u201d in the search bar. Click <strong>Install Now<\/strong> on the associated plugin card.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"233\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120344\/dropdown-menus-30.png\" alt=\"WordPress plugins page with red box around Responsive Menu\" class=\"wp-image-97196\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120344\/dropdown-menus-30.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120344\/dropdown-menus-30-300x104.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Next, navigate to <strong>Plugins <\/strong>&gt; <strong>Installed Plugins<\/strong> on the left-hand side in your WP dashboard, locate <strong>Responsive Menu<\/strong>, and click <strong>Activate<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"63\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120345\/dropdown-menus-31.png\" alt=\"WordPress Installed Plugins dashboard\" class=\"wp-image-97197\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120345\/dropdown-menus-31.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120345\/dropdown-menus-31-300x28.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Once you\u2019ve activated the plugin, navigate to <strong>Appearance <\/strong>&gt; <strong>Menus<\/strong> and select the tab <strong>Manage Locations<\/strong>. From there, assign the new menu to your preferred location. You can choose any location among the primary, secondary, and footer options as long as your theme supports it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"343\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120346\/dropdown-menus-32.png\" alt=\"Responsive Menu menage locations dashboard\" class=\"wp-image-97198\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120346\/dropdown-menus-32.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120346\/dropdown-menus-32-300x152.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>When that\u2019s finished, navigate to <strong>Responsive Menu <\/strong>&gt;<strong> Menus<\/strong> and click <strong>Create New Menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"321\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120347\/dropdown-menus-33.png\" alt=\"Responsive Menu dashboard with red box around create new menu\" class=\"wp-image-97199\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120347\/dropdown-menus-33.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120347\/dropdown-menus-33-300x143.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>Pick a menu theme and click <strong>Next<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"345\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120348\/dropdown-menus-34.png\" alt=\"Responsive Menu page to select themes\" class=\"wp-image-97200\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120348\/dropdown-menus-34.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120348\/dropdown-menus-34-300x153.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>In the <strong>Menu Settings<\/strong> tab, make sure to name your new menu and map your existing WordPress menu to it. Finally, click <strong>Create Menu<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"443\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120350\/dropdown-menus-35.png\" alt=\"Responsive Menu menu settings page\" class=\"wp-image-97201\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120350\/dropdown-menus-35.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120350\/dropdown-menus-35-300x197.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>At this point, be aware that your existing WordPress theme menu might overlap with your new responsive menu.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"505\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120351\/dropdown-menus-36.png\" alt=\"Respnosive Menu dashboard\" class=\"wp-image-97202\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120351\/dropdown-menus-36.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120351\/dropdown-menus-36-300x224.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>To resolve this, right-click on the existing WordPress menu and click <strong>Inspect<\/strong>. Now you need to identify and copy your existing CSS menu selector, so go to <strong>Settings <\/strong>&gt;<strong> General Settings <\/strong>on the<strong> <\/strong>left-hand column and paste the menu selector in the <strong>Hide Theme Menu<\/strong> text field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"581\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120352\/dropdown-menus-37.png\" alt=\"Responsive Menu general settings dashboard\" class=\"wp-image-97203\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120352\/dropdown-menus-37.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120352\/dropdown-menus-37-300x258.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<p>The existing menu selector will be different for each WordPress theme.<\/p>\n\n\n\n<p>Once you\u2019re happy with your new menu, click <strong>Update<\/strong> to save the changes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"675\" height=\"576\" src=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120353\/dropdown-menus-38.png\" alt=\"Responsive Menu dashboard with red arrow pointing to update button\" class=\"wp-image-97204\" srcset=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120353\/dropdown-menus-38.png 675w, https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120353\/dropdown-menus-38-300x256.png 300w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Recap<\/h2>\n\n\n\n<p>Dropdown menus can be a great tool for pointing your website\u2019s visitors to the right pages without sacrificing the existing design of your WordPress theme. You can build dropdown menus on WordPress in three main ways: via the full site editor (FSE), via the native WP admin menu dashboard, and via third-party WordPress plugins like Max Mega Menu and Responsive Menu.<\/p>\n\n\n\n<p>If you liked this guide, you might also like to read <a href=\"https:\/\/www.crazyegg.com\/blog\/build-a-wordpress-website\/\" target=\"_blank\" rel=\"noreferrer noopener\">how to build a WordPress website in five easy steps<\/a>.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A dropdown menu is a graphical user interface (GUI) element on a website that reveals additional navigation options whenever a user clicks on or hovers&#8230;<\/p>\n","protected":false},"author":279,"featured_media":97167,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","_lmt_disableupdate":"","_lmt_disable":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[876],"tags":[],"class_list":["post-97165","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Here\u2019s The #1 Way to Create Dropdown Menus In WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress\" \/>\n<meta property=\"og:description\" content=\"A dropdown menu is a graphical user interface (GUI) element on a website that reveals additional navigation options whenever a user clicks on or hovers...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"The Daily Egg\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/crazyegganalytics\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-20T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-06T23:13:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"675\" \/>\n\t<meta property=\"og:image:height\" content=\"397\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hiten Shah\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hnshah\" \/>\n<meta name=\"twitter:site\" content=\"@CrazyEgg\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hiten Shah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/\"},\"author\":{\"name\":\"Hiten Shah\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\"},\"headline\":\"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress\",\"datePublished\":\"2024-04-20T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:13:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/\"},\"wordCount\":1845,\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/24120312\\\/dropdown-menus-1.png\",\"articleSection\":[\"Website\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/\",\"name\":\"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/24120312\\\/dropdown-menus-1.png\",\"datePublished\":\"2024-04-20T13:00:00+00:00\",\"dateModified\":\"2026-01-06T23:13:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#primaryimage\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/24120312\\\/dropdown-menus-1.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/24120312\\\/dropdown-menus-1.png\",\"width\":675,\"height\":397},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/dropdown-menus-in-wordpress\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Website\",\"item\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/category\\\/website\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"name\":\"The Crazy Egg Blog\",\"description\":\"Website Optimization\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#organization\",\"name\":\"Crazy Egg\",\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"contentUrl\":\"https:\\\/\\\/ceblog.s3.amazonaws.com\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/Crazy-Egg-logo-small.png\",\"width\":191,\"height\":100,\"caption\":\"Crazy Egg\"},\"image\":{\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/crazyegganalytics\\\/\",\"https:\\\/\\\/x.com\\\/CrazyEgg\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/crazy-egg\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCJNe_xmPi07YezxaqfoRVqg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/#\\\/schema\\\/person\\\/c1969663812802521ba57624887e9df6\",\"name\":\"Hiten Shah\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g\",\"caption\":\"Hiten Shah\"},\"description\":\"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\\\/Twitter.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/hnshah\\\/\",\"https:\\\/\\\/x.com\\\/hnshah\"],\"url\":\"https:\\\/\\\/www.crazyegg.com\\\/blog\\\/author\\\/hiten\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/","og_locale":"en_US","og_type":"article","og_title":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress","og_description":"A dropdown menu is a graphical user interface (GUI) element on a website that reveals additional navigation options whenever a user clicks on or hovers...","og_url":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/","og_site_name":"The Daily Egg","article_publisher":"https:\/\/www.facebook.com\/crazyegganalytics\/","article_published_time":"2024-04-20T13:00:00+00:00","article_modified_time":"2026-01-06T23:13:49+00:00","og_image":[{"width":675,"height":397,"url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png","type":"image\/png"}],"author":"Hiten Shah","twitter_card":"summary_large_image","twitter_creator":"@hnshah","twitter_site":"@CrazyEgg","twitter_misc":{"Written by":"Hiten Shah","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#article","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/"},"author":{"name":"Hiten Shah","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6"},"headline":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress","datePublished":"2024-04-20T13:00:00+00:00","dateModified":"2026-01-06T23:13:49+00:00","mainEntityOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/"},"wordCount":1845,"publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png","articleSection":["Website"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/","url":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/","name":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress","isPartOf":{"@id":"https:\/\/www.crazyegg.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#primaryimage"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#primaryimage"},"thumbnailUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png","datePublished":"2024-04-20T13:00:00+00:00","dateModified":"2026-01-06T23:13:49+00:00","breadcrumb":{"@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#primaryimage","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2024\/04\/24120312\/dropdown-menus-1.png","width":675,"height":397},{"@type":"BreadcrumbList","@id":"https:\/\/www.crazyegg.com\/blog\/dropdown-menus-in-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.crazyegg.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Website","item":"https:\/\/www.crazyegg.com\/blog\/category\/website\/"},{"@type":"ListItem","position":3,"name":"Here\u2019s The #1 Way to Create Dropdown Menus In WordPress"}]},{"@type":"WebSite","@id":"https:\/\/www.crazyegg.com\/blog\/#website","url":"https:\/\/www.crazyegg.com\/blog\/","name":"The Crazy Egg Blog","description":"Website Optimization","publisher":{"@id":"https:\/\/www.crazyegg.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.crazyegg.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.crazyegg.com\/blog\/#organization","name":"Crazy Egg","url":"https:\/\/www.crazyegg.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","contentUrl":"https:\/\/ceblog.s3.amazonaws.com\/wp-content\/uploads\/2015\/06\/Crazy-Egg-logo-small.png","width":191,"height":100,"caption":"Crazy Egg"},"image":{"@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/crazyegganalytics\/","https:\/\/x.com\/CrazyEgg","https:\/\/www.linkedin.com\/company\/crazy-egg\/","https:\/\/www.youtube.com\/channel\/UCJNe_xmPi07YezxaqfoRVqg"]},{"@type":"Person","@id":"https:\/\/www.crazyegg.com\/blog\/#\/schema\/person\/c1969663812802521ba57624887e9df6","name":"Hiten Shah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/715288b6d07eff81ecae058546cd68eaf7d1931c1b0a5472ba035eae1198262c?s=96&d=mm&r=g","caption":"Hiten Shah"},"description":"As co-founder and CEO, I have started multiple software-as-a-service (SaaS) companies since 2003 including Crazy Egg, KISSmetrics, and Nira. Sold my last startup (Nira) to Dropbox in 2024 and got my first ever job with a boss. I most recently worked on Product &amp; Growth for the AI Products @ Dropbox. I\u2019m now the CEO of Crazy Egg. Connect with me on LinkedIn or X\/Twitter.","sameAs":["https:\/\/www.linkedin.com\/in\/hnshah\/","https:\/\/x.com\/hnshah"],"url":"https:\/\/www.crazyegg.com\/blog\/author\/hiten\/"}]}},"modified_by":"Lars Lofgren","_links":{"self":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/97165","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/users\/279"}],"replies":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/comments?post=97165"}],"version-history":[{"count":0,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/posts\/97165\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media\/97167"}],"wp:attachment":[{"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/media?parent=97165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/categories?post=97165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.crazyegg.com\/blog\/wp-json\/wp\/v2\/tags?post=97165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}