How to Add Dropdown Menu in WordPress

A clear and organized menu helps make your website easy to navigate. Adding dropdown menus is a great way to organize your site’s navigation. In WordPress, dropdown menus organize content and improve the user experience, especially when you have many categories or sections.

In this article, we’ll demonstrate a step-by-step guide on how to add dropdown menu WordPress.

What is a Dropdown Menu?

A dropdown menu is a navigation feature in WordPress that shows a list of links under a main menu item. When users hover over or click a menu item, more links or pages appear. This makes it easier to move around the site. 

Adding a Dropdown Menu in WordPress

Adding a dropdown menu to a website enhances its navigation by organizing content in a compact and user-friendly way. It helps visitors quickly find different pages or categories without cluttering the layout, which makes the site easier to use. 

Let’s follow the steps below to learn how to add a dropdown menu in WordPress:

Step 1: Access the Menus Section

Log into your WordPress site and go to the Menus section, located under the Appearance tab:

On the menus page, you can create, edit, and organize the menus on your site.

Step 2: Create a New Menu WordPress

To create a dropdown menu in WordPress, click the Create a new menu link at the top of the page:

Name your menu, such as “Main Menu” or “Header Menu,” choose a display location, and then click the “Create Menu” button. This will make a new menu where you can start adding items:

Step 3: Add Menu Items

On the left side of the Menus page, you’ll find options to add items like pages, posts, custom links, and categories. Simply check the box next to the item you want and click Add to Menu:

After adding the desired items to the menu, click on the Save Menu Button:

You can also use WordPress menu plugins for more customization options.

Step 4: Create Dropdown Menu WordPress

After adding your menu items, you can arrange them as dropdowns by dragging them slightly to the right under the main item. For example, if About Us is the main item, we will drag each item slightly to the right under it, one by one, to create a dropdown menu:

Step 5: Test Your Dropdown Menu

After saving your menu, test it by visiting your website and hovering over the parent item (e.g., “About Us”). The dropdown should appear with the sub-menu items, as demonstrated below:

Ensure it functions properly on both desktop and mobile; if not, review your steps or adjust the theme settings.

Step 6: Customize a Dropdown Menu

You can customize your dropdown menu’s look with CSS, like adding hover effects or changing its style. For this purpose, navigate to the Appearance, Customize, and then Additional CSS. For example, the following code changes the background color of the dropdown menu upon hovering:

.menu-item:hover > .sub-menu {
    display: block;
    background-color: #ADD8E6;
}

This will add a sky blue background color to the dropdown menu:

Now visit the website, and hover over the dropdown items to confirm the CSS styling effect:

That’s all about creating a dropdown menu in WordPress.

Conclusion

Adding a dropdown menu to your WordPress site enhances navigation, organizes content, and improves the overall user experience. Dropdown menus help users find pages, posts, or categories easily without cluttering the layout. Additionally, customizing the menu’s style with CSS allows you to match it with your site’s design. In this article, we have demonstrated how to add or customize a dropdown menu in WordPress.

FAQ