{"id":110261,"date":"2022-05-01T04:58:00","date_gmt":"2022-05-01T09:58:00","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=110261"},"modified":"2024-09-28T12:32:32","modified_gmt":"2024-09-28T17:32:32","slug":"add-dropdown-menu-wordpress","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/","title":{"rendered":"How to Create a Drop-Down Menu in WordPress"},"content":{"rendered":"\n

Poor navigational features can hurt the usability and accessibility<\/a> of an otherwise beautifully-designed website. It is extremely important that your users are able to access whatever they need on your site, easily and quickly.<\/p>\n\n\n\n

Especially if you\u2019ve accumulated many pages and posts, a well-planned navigation bar or menu will make it easy for users to explore everything you have to offer. This simple feature can also help reduce your bounce rates<\/a>, keeping visitors around for longer<\/p>\n\n\n\n

In this article, we\u2019ll walk through how to create a drop-down navigation menu bar in WordPress. Let\u2019s get started!<\/p>\n\n\n\n\n\n

How to Add a Drop-Down Menu in WordPress: A Step-by-Step Guide<\/h2>\n\n\n\n

There are several types of navigational menus, as you might have seen while visiting different websites. Let\u2019s look at some of the most popular options.<\/p>\n\n\n\n

Arguably the most common type is the header menu:<\/p>\n\n\n\n

\"Screenshot<\/figure>\n\n\n\n

However, sidebar menus are also very prominent:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

You\u2019ll also see plenty of hamburger menus on mobile sites, which is a responsive drop and expands when the hamburger icon is clicked on:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

One final example \u2013 which is also what we\u2019ll be creating later in this post \u2013 is the drop-down navigation menu or navbar. Like the hamburger menu, this style economizes screen real estate, because most of the content is hidden away until it is needed:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Keep in mind that certain themes don\u2019t support drop-down menus. So the first thing you\u2019ll want to do is confirm that your theme offers this option. You can usually find this out by checking the theme\u2019s documentation. Although, it is possible to create a custom drop-down navigation menu html or css code if your default theme is limited.<\/p>\n\n\n\n

In the following walkthrough, we\u2019ll show you how to use native WordPress features to build your menu. An advantage of this method is you\u2019ll retain any menu item you create even if you change themes or add new plugins to your site in the future.<\/p>\n\n\n\n

Step 1: Create Menu Items<\/h3>\n\n\n\n

To get started, navigate to Appearance > Menus<\/em> in your WordPress dashboard. The options available there will be partly determined by your current theme.<\/p>\n\n\n\n

Click over to the Edit Menus<\/em> tab, where you can choose to create a new menu:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Enter a name in the input field under the Menu structure<\/em> section, and then click on Create Menu<\/em>:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Once you\u2019ve created at least one menu, you should see a new tab titled Manage Locations<\/em>, right beside Edit Menus<\/em>.<\/p>\n\n\n\n

Now you can begin adding items to your menu. You can include pages, posts, and custom URLs. To add a page, for example, check the boxes next to the content you want to add under the Pages<\/em> section on the right, and then select Add to Menu<\/em>:                                                         <\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

The same process applies to posts. If you want to add a link to your menu, expand the Custom Links<\/em> section and enter a URL as well as some custom text:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

You can take similar steps to add categories to your main menu, by expanding the Categories<\/em> section. Any menu item created this way will open a page containing all the content contained under a particular category.<\/p>\n\n\n\n

Step 2: Set Your Menu Structure<\/h3>\n\n\n\n

At this stage, your menu is not yet organized. Everything will simply show up in the order in which it was added. There\u2019s also no drop-down functionality just yet. So the next step is to resolve those two problems.<\/p>\n\n\n\n

To do that, you can simply drag-and-drop your menu items wherever you\u2019d like them to go. You can even create submenu items this way. For example, we\u2019ve listed three specific blog posts so that they\u2019ll appear under the broader Blog<\/em> menu item:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Once you\u2019re done customizing your menu\u2019s structure and adding each dropdown item, make sure to save your changes. Also note that depending on your theme, you may need to assign your new menu to a location. The relevant options can be found under the Menu Settings<\/em> section:<\/p>\n\n\n\n

\"How<\/figure>\n\n\n\n

Then you can check out your site on the front end to see the menu in action. Any sub-items will show up as a drop-down menu:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Remember that navigation menus should make it easier to browse your website. Therefore, you\u2019ll want to limit the number of items you add to your menus, so they don\u2019t become confusing or cluttered.<\/p>\n\n\n\n

Step 3: Add CSS to Your Menu<\/h3>\n\n\n\n

You can also add custom styling to your drop-down menu by using CSS classes<\/a>. To do this, start by clicking on Screen Options<\/em> at the top of your dashboard:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

Select the check-box labeled CSS Classes<\/em>:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

This will enable you to create a custom CSS dropdown menu. It will also restrict any custom styling to the items your specific classes are applied to.<\/p>\n\n\n\n

Step 4: Preview Your Menu<\/h3>\n\n\n\n

At this point, your menu is just about ready to go. Before finalizing it, however, you might want to check it out in the WordPress Customizer. You can toggle the opacity, hover, font size and more, while seeing their effects in real-time.<\/p>\n\n\n\n

Click on Manage with Live Preview<\/em> to enter the live editor:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

You can make further changes here as needed, such as adding, removing, or reordering menu items:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

You won\u2019t need a new tab to preview your changes, since the Customizer shows you a live preview of your website.<\/p>\n\n\n\n

Step 5: Publish Your Menu<\/h3>\n\n\n\n

When you\u2019re ready, you can make your new drop down menu live with a single click. Simply select the Publish<\/em> button:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

This will make the menu live on your site, and enable visitors to start using it.<\/p>\n\n\n\n

It\u2019s also worth noting that if you\u2019ve created multiple menus and want to place them in various locations, you can use the Customizer for that as well:<\/p>\n\n\n\n

\"Drop<\/figure>\n\n\n\n

With the Customizer, you can assign menus to all the different locations supported by your theme.<\/p>\n\n\n\n

WordPress Drop-Down Menu Plugins<\/h2>\n\n\n\n

Of course, if you\u2019d rather use plugins to create your drop-down menus, there are several options available. Here are some of the best menu plugins for WordPress, both free and premium:<\/p>\n\n\n\n

    \n
  1. Max Mega Menu<\/strong><\/a>:<\/strong> A free plugin that adds on plenty of options to the existing menu editor.<\/li>\n\n\n\n
  2. Hero Menu<\/strong><\/a>:<\/strong> A highly-customizable tool with a focus on responsiveness.<\/li>\n\n\n\n
  3. UberMenu<\/strong><\/a>:<\/strong> A solution that gives you maximum control over your menus\u2019 style and functionality.<\/li>\n<\/ol>\n\n\n\n

    Any of these tools can get the job done. So which one you choose will come down to personal preference and the specific features you\u2019re looking for.<\/p>\n\n\n\n

    Optimize Your WordPress Site with an Efficient Drop Down Menu<\/h2>\n\n\n\n

    It\u2019s important to build visually-appealing and accessible websites. One simple technique that helps in both of these areas is to create drop-down navigation menus. This menu option is attractive and easy to use, and also saves you some screen real estate.<\/p>\n\n\n\n

    To maintain a user-friendly website, you\u2019ll also need access to the right resources<\/a>, and you\u2019ll require dependable hosting for your WordPress site<\/a>. Our plans<\/a> can help!<\/p>\n","protected":false},"excerpt":{"rendered":"

    Poor navigational features can hurt the usability and accessibility of an otherwise beautifully-designed website. It is extremely important that your users are able to access whatever they need on your site, easily and quickly. Especially if you\u2019ve accumulated many pages and posts, a well-planned navigation bar or menu will make it easy for users to…<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":110263,"template":"","resource-topic":[904,912],"resource-role":[896],"resource-type":[916],"class_list":["post-110261","resource","type-resource","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\nHow To Create A Drop-Down Menu in WordPress | WP Engine\u00ae<\/title>\n<meta name=\"description\" content=\"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create A Drop-Down Menu in WordPress | WP Engine\u00ae\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"WP Engine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/wpengine\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-28T17:32:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/09\/shutterstock_1030624879-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@wpengine\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/\",\"url\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/\",\"name\":\"How To Create A Drop-Down Menu in WordPress | WP Engine\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\"},\"datePublished\":\"2022-05-01T09:58:00+00:00\",\"dateModified\":\"2024-09-28T17:32:32+00:00\",\"description\":\"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.\",\"breadcrumb\":{\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/wpengine.com\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Resources\",\"item\":\"https:\/\/wpengine.com\/case-studies\/resources\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Drop-Down Menu in WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#website\",\"url\":\"https:\/\/wpengine.com\/case-studies\/\",\"name\":\"WP Engine\",\"description\":\"Managed Hosting for WordPress\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085\",\"name\":\"WP Engine\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g\",\"caption\":\"WP Engine\"},\"sameAs\":[\"https:\/\/wpengine.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Create A Drop-Down Menu in WordPress | WP Engine\u00ae","description":"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"How To Create A Drop-Down Menu in WordPress | WP Engine\u00ae","og_description":"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.","og_url":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/","og_site_name":"WP Engine","article_publisher":"https:\/\/www.facebook.com\/wpengine","article_modified_time":"2024-09-28T17:32:32+00:00","og_image":[{"width":1100,"height":500,"url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/09\/shutterstock_1030624879-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@wpengine","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/","url":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/","name":"How To Create A Drop-Down Menu in WordPress | WP Engine\u00ae","isPartOf":{"@id":"https:\/\/wpengine.com\/case-studies\/#website"},"datePublished":"2022-05-01T09:58:00+00:00","dateModified":"2024-09-28T17:32:32+00:00","description":"Learn how to create a drop-down menu in WordPress. Discover how to leverage HTML, CSS and plugins to build intuitive navigation menus.","breadcrumb":{"@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/case-studies\/resources\/add-dropdown-menu-wordpress\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/case-studies\/"},{"@type":"ListItem","position":2,"name":"Resources","item":"https:\/\/wpengine.com\/case-studies\/resources\/"},{"@type":"ListItem","position":3,"name":"How to Create a Drop-Down Menu in WordPress"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/case-studies\/#website","url":"https:\/\/wpengine.com\/case-studies\/","name":"WP Engine","description":"Managed Hosting for WordPress","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/case-studies\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/f5301455463371a10d1fc290e9ad0085","name":"WP Engine","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/case-studies\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d8770fe9625ca7c4601f13d9d0ab86565a6dac8cd6a77bfe2ada6d83c6837870?s=96&d=mm&r=g","caption":"WP Engine"},"sameAs":["https:\/\/wpengine.com"]}]}},"acf":[],"grid_image_url":"https:\/\/wpengine.com\/case-studies\/wp-content\/uploads\/2020\/09\/shutterstock_1030624879-2.jpg","media-type":{"term_id":916,"name":"Article","slug":"article"},"role":"<strong>Roles:<\/strong> Developer","topic":"<strong>Topics:<\/strong> Marketing, Performance","_links":{"self":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource\/110261","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource"}],"about":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/types\/resource"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/users\/1"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media\/110263"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/media?parent=110261"}],"wp:term":[{"taxonomy":"resource-topic","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-topic?post=110261"},{"taxonomy":"resource-role","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-role?post=110261"},{"taxonomy":"resource-type","embeddable":true,"href":"https:\/\/wpengine.com\/case-studies\/wp-json\/wp\/v2\/resource-type?post=110261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}