How to Add a WordPress Drop-Down Menu With Site Editor<\/h3>
The Navigation block in the Site Editor provides a drag-and-drop interface for creating and organizing all the menu items, making it easier to build drop-down menus. Note that this method is currently only compatible with block themes.<\/p>
Here’s how to create a drop-down menu using the Navigation block:<\/p>
- \n
- Head to Appearance <\/strong>→ Editor <\/strong>from your WordPress dashboard.<\/li>\n\n\n\n
- Click the block inserter (+<\/strong>) icon in the top menu bar and search for the Navigation <\/strong>block. Drag and drop it anywhere in the editor interface.<\/li>\n<\/ol>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-add-navigationblock-1024x451.png\")
<\/a><\/figure><\/div>- \n
- In the Settings <\/strong>sidebar, drag an existing menu item to a lower level, turning it into a child menu nested inside the main menu item.<\/li>\n<\/ol>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/wordpress-siteeditor-create-submenu-1024x378.png\")
<\/a><\/figure><\/div>- \n
- To create a drop-down menu with a new menu link, select Options <\/strong>→ Add submenu link<\/strong> next to the intended parent menu item.<\/li>\n<\/ol>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-add-submenulink-1024x401.png\")
<\/a><\/figure><\/div>- \n
- Click on the block inserter (+<\/strong>) icon and pick a different block to create a submenu for another content type. Drag and drop it under its intended parent menu item.<\/li>\n<\/ol>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-create-new-submenu-1024x448.png\")
<\/a><\/figure><\/div>- \n
- Click on individual menu items to configure the menu settings, such as the label, URL, and description.<\/li>\n<\/ol>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-navigation-linksettings-1024x411.png\")
<\/a><\/figure><\/div>- \n
- To create a new submenu under the same parent menu item, select the block inserter (+<\/strong>) icon under the existing child menu item.<\/li>\n<\/ol>\n
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-create-submenu-2-1024x406.png\")
<\/a><\/figure><\/div>- \n
- The final result will look as follows:<\/li>\n<\/ol>
![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2023\/04\/wordpress-siteeditor-dropdownmenu-1024x264.png\")
<\/a><\/figure>How to Add a Drop-Down Menu in WordPress Using a Plugin<\/h3>
Another way to create custom drop-down menus involves using a drop-down menu plugin. There are many excellent menu plugins available in the WordPress plugin directory. For this tutorial, we’re going to show you how to create a drop-down menu using Max Mega Menu<\/a>:<\/p>
- \n
- Install and activate the WordPress plugin<\/a>.<\/li>\n\n\n\n
- Navigate to Mega Menu<\/strong> from your dashboard. In the Menu Locations<\/strong> section, click on your primary menu and check the Enable Max Mega Menu for this menu location<\/strong> box to enable the drop-down functionality. Inside the same section, choose the event that triggers the submenu and the drop-down menu’s animation on desktop and mobile and select Save Changes<\/strong>.<\/li>\n<\/ol>
![\"Max](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/01\/image-64.png\")
<\/a><\/figure>- \n
- The plugin will inherit your theme’s style by default. Open the Menu Themes<\/strong> tab if you want to tweak the menu’s style, animation, and size. Make sure the Select theme to edit<\/strong> option points to your primary menu.<\/li>\n\n\n\n
- Navigate to Appearance <\/strong>→ Menus<\/strong> and add items to the default or primary menu with the Max Mega Menu functionality enabled. Click Save Menu<\/strong> once you’re done.<\/li>\n<\/ol>
How to Create Drop-Down Menus Manually<\/h3>
Creating a drop-down navigation menu in WordPress manually involves using the native features of a WordPress website. The upside of this method is that the drop-down menu will remain functional even after changing WordPress themes or installing new plugins.<\/p>
With this method, you can include pages, posts, categories, and custom links in your menu. However, ensure your theme supports drop-down menus by checking the theme’s documentation.<\/p>
Follow these steps to create a custom drop-down menu in WordPress manually:<\/p>
1. Create the Menu Items<\/strong><\/p>
First, we need to create a new menu. Navigate to Appearance <\/strong>→ Menus <\/strong>from your WordPress dashboard. Within the Edit Menus<\/strong> tab, you’ll see the Menu structure<\/strong> section where you can create a new menu.<\/p>
Keep in mind that the appearance of this section will depend on your theme.<\/p>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-appearance-of-the-Menus-section-where-user-can-customize-their-menus-1024x484.png\")
<\/a><\/figure><\/div>Add the menu name to the textbox and select Create Menu<\/strong>. Then, switch to the Add menu items<\/strong> section and pick the desired elements for the new submenu. You can do so by checking the box next to a chosen item and clicking Add to Menu<\/strong>.<\/p>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-Pages-section-allows-users-to-add-menu-items-to-the-menu-structure-1024x516.png\")
<\/a><\/figure><\/div>The supported items you can use for sub-items include pages, posts, and categories. You can also insert custom links as menu items, allowing you to redirect users to a specific page on your site.<\/p>
The selected menu items will appear under the Menu structure<\/strong> section. Simply drag and drop the items and sub-items in your preferred order.<\/p>
2. Style the Menu<\/h3>
WordPress drop-down menus are customizable using CSS. Enable this function by selecting the Screen Options<\/strong> menu at the top right corner of the Menus<\/strong> page and checking the CSS Classes<\/strong> box.<\/p>
If you expand a menu item, you’ll see a new text box labeled CSS Classes<\/strong>. This is where you can add WordPress CSS classes to customize the style of your new drop-down menu.<\/p>
Check out our complete CSS cheat sheet<\/a> to help you personalize the drop-down menu.<\/p>
3. Publish the Menu<\/h3>
To change the location of the new menu, you can choose from the available options under the Menu Settings<\/strong> section or the Manage Locations<\/strong> tab. Once again, the choice depends on your active WordPress theme.<\/p>
In this example, we will place the menu at the top:<\/p>
\n![\"An](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/An-example-of-a-dropdown-menu-added-to-the-top-1024x383.png\")
<\/a><\/figure><\/div>Click the Save Menu <\/strong>button at the bottom right corner to save the changes and publish the drop-down menu.<\/p>
\n\n\n
\nPro Tip<\/h4>\n
For a visual reference while changing menu locations, select the Manage with Live Preview<\/strong> button at the top of the page. This is especially helpful for creating complex multi-level drop-down menus. In the live preview mode, all changes made in the WordPress customizer are displayed in real time, allowing you to publish the drop-down menu directly from this mode.<\/p>\n <\/div>\n\n\n\n<\/p>
Benefits of a Drop-Down Menu for WordPress Sites<\/h2>
Drop-down menus offer numerous advantages for WordPress sites, enhancing both aesthetics and functionality. Key benefits include:<\/p>
- \n
- Efficient use of space<\/strong>. Submenus allow for more links without cluttering the menu area.<\/li>\n\n\n\n
- Enhanced user navigation<\/strong>. They enable users to find and access specific pages quickly.<\/li>\n\n\n\n
- Scalability<\/strong>. Easily accommodate new pages or categories without redesigning the entire menu.<\/li>\n\n\n\n
- Aesthetic appeal<\/strong>. Customizable to match the site design, enhancing visual consistency.<\/li>\n\n\n\n
- Improved accessibility<\/strong>. Drop-down menus help aid users with cognitive disabilities when browsing a website.<\/li>\n\n\n\n
- Organized content structure<\/strong>. Helps structure site content for easier user comprehension.<\/li>\n<\/ul>
Best Practices for Creating Drop-Down Menus in WordPress<\/h2>
Effective navigation menus are crucial for a positive user experience on WordPress sites. A well-designed menu, especially with drop-downs, should be intuitive and visually appealing to facilitate quick access to important content.<\/p>
Here are essential tips for optimizing your drop-down menus:<\/p>
Keep It Simple and Intuitive<\/strong><\/p>
For drop-down menus, simplicity is key. A clear menu structure helps prevent confusion and frustration. Prioritize your most important links and make sure they are visible and accessible.<\/p>
It’s also crucial to limit the number of menu levels, as excessive layers can complicate navigation and overwhelm your visitors.<\/p>
Use Descriptive Labels<\/strong><\/p>
Each menu item should be clearly and accurately labeled to reflect the content or page it leads to. Avoid using vague or generic terms that could confuse users about where a link will take them.<\/p>
Consistent labeling not only helps in setting clear expectations but also maintains the coherence of your site’s branding.<\/p>
Including accessible rich internet applications (ARIA) labels for menu items is also a good practice, enhancing accessibility for screen reader users and making your site more inclusive.<\/p>
Use Visuals Elements<\/strong><\/p>
One of the best ways to make a menu more interactive is to add WordPress menu icons<\/a> to each menu item using a plugin.<\/p>
The Menu Image<\/a> plugin, for example, provides a massive collection of FontAwesome and DashIcons icons to choose from. You can add the desired elements to the drop-down menu in different positions or include them as animations triggered on mouse hover.<\/p>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/The-banner-of-the-Menu-Image-plugin.png\")
<\/a><\/figure><\/div>However, avoid overcrowding the space with unnecessary icons, as this can hurt the menu’s readability and distract users from exploring your WordPress site.<\/p>
Add Custom CSS<\/strong><\/p>
As previously mentioned, you can add custom CSS<\/a> classes to new menus. Consider adding custom CSS to tweak the color, font size, and spacing of each menu item.<\/p>
Go to Appearance <\/strong>→ Customize <\/strong>from your dashboard and use the Additional CSS<\/strong> feature to add custom code to your site.<\/p>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/How-to-add-custom-CSS-via-WordPress-customizer-1024x283.png\")
<\/a><\/figure><\/div>Use the inspect element<\/a> tool in your browser to locate your theme’s CSS #ID<\/strong> selector – you’ll need it to select a specific element for customization.<\/p>
\n![\"The](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/How-to-locate-a-themes-ID-selector-using-the-Inspect-tool-in-Google-1024x233.png\")
<\/a><\/figure><\/div>In this example, we will change the top menu’s font color to blue. Here’s the code we used to alter the font color:<\/p>
#top-menu li.menu-item a {\ncolor:#0051D7;\n}<\/pre>Feel free to experiment with different CSS styles or use pre-made code to streamline the design process. For more information, follow this tutorial on how to create a simple CSS drop-down menu<\/a>.<\/p>
Create a Mega Menu<\/strong><\/p>
If you want to display a large number of options in a single drop-down menu, it’s best to create a WordPress mega menu<\/a>. Unlike standard drop-down menus, mega menus typically contain more links and submenus.<\/p>
Since this type of menu displays your website’s entire structure, visitors can access the deepest parts of the site from the main menu. It is ideal for large websites as they shorten the user journey.<\/p>
\n![\"An](\"\/tutorials\/wp-content\/uploads\/sites\/2\/2022\/05\/An-example-of-a-mega-menu-built-using-the-Max-Mega-Menu-plugin.png\")
<\/a><\/figure><\/div>There are plenty of WordPress menu plugins<\/a> to help you easily create a custom mega menu. We designed the mega menu design example above using the Max Mega Menu plugin. Other notable mega menu WordPress plugins include QuadMenu<\/a> and Superfly<\/a>.<\/p>
Test Drop-Down Menus Across Different Browsers and Devices<\/strong><\/p>
It’s essential to test your drop-down menus on various browsers and devices to ensure compatibility and functionality of all interactive elements.<\/p>
Utilizing a staging environment is highly recommended. This allows for safe testing and tweaking of menus and designs before implementation, ensuring a consistent and seamless user experience across all platforms.<\/p>
A web hosting provider that offers a staging environment is beneficial for this purpose. Hostinger’s Business and Cloud Startup Managed WordPress hosting plans<\/a> come with a useful staging tool.<\/p>
![\"\"](\"https:\/\/www.hostinger.com\/tutorials\/wp-content\/uploads\/sites\/2\/2024\/06\/New-WP_in-text-banner-1024x300.png\")
<\/a><\/figure>Conclusion<\/h2>
The WordPress drop-down menu is a crucial part of the website navigation system. It makes exploring a site easier and, if created correctly, helps search engines’ crawlers with indexing.<\/p>
This article has covered the steps to create a drop-down menu in WordPress manually and using a plugin. We also provided some tips to optimize your drop-down menus.<\/p>
We hope this article has answered all your questions about this type of WordPress menu. Best of luck on your website-building journey!<\/p>
WordPress Drop-Down Menu Tutorial FAQ<\/h2>
Here are some of the frequently asked questions about how to create a drop-down menu in WordPress.<\/p>
How to Change the Order of Items in a Drop-Down Menu in WordPress?<\/h3>
To change the order of items in a WordPress drop-down menu, go to Appearance → Menus<\/strong>. Then, select the menu, drag the desired item to its new position, create submenus by dragging items to the right, and save your changes.<\/p> <\/div>
How Can I Make My Drop-Down Menu Visible on All Pages in WordPress?<\/h3>
Go to Appearance → Menus<\/strong> and select the menu you want to edit. Click on the Manage Locations<\/strong> tab, choose the location for your drop-down menu, then click Save Changes<\/strong>. The drop-down menu will now appear on all pages.<\/p> <\/div>
Do Drop-Down Menus Affect Website Loading Speed?<\/h3>
Yes, drop-down menus can impact website loading speed, especially if they contain complex scripts or high-resolution images. However, with optimized coding and lightweight design elements, their effect on speed can be minimal.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"
Drop-down menus are essential for many websites’ navigation systems, providing a user-friendly way to organize and access content. WordPress, with its intuitive interface, makes creating drop-down menus easy. This article will teach you three ways to make a drop-down menu. We’ll also explore best practices for designing drop-down menus that enhance user experience and optimize […]<\/p>\n
- Enhanced user navigation<\/strong>. They enable users to find and access specific pages quickly.<\/li>\n\n\n\n
- Navigate to Appearance <\/strong>→ Menus<\/strong> and add items to the default or primary menu with the Max Mega Menu functionality enabled. Click Save Menu<\/strong> once you’re done.<\/li>\n<\/ol>
- Navigate to Mega Menu<\/strong> from your dashboard. In the Menu Locations<\/strong> section, click on your primary menu and check the Enable Max Mega Menu for this menu location<\/strong> box to enable the drop-down functionality. Inside the same section, choose the event that triggers the submenu and the drop-down menu’s animation on desktop and mobile and select Save Changes<\/strong>.<\/li>\n<\/ol>
- Install and activate the WordPress plugin<\/a>.<\/li>\n\n\n\n
- The final result will look as follows:<\/li>\n<\/ol>
- To create a new submenu under the same parent menu item, select the block inserter (+<\/strong>) icon under the existing child menu item.<\/li>\n<\/ol>
- Click on individual menu items to configure the menu settings, such as the label, URL, and description.<\/li>\n<\/ol>
- Click on the block inserter (+<\/strong>) icon and pick a different block to create a submenu for another content type. Drag and drop it under its intended parent menu item.<\/li>\n<\/ol>
- To create a drop-down menu with a new menu link, select Options <\/strong>→ Add submenu link<\/strong> next to the intended parent menu item.<\/li>\n<\/ol>
- Click the block inserter (+<\/strong>) icon in the top menu bar and search for the Navigation <\/strong>block. Drag and drop it anywhere in the editor interface.<\/li>\n<\/ol>