Interested in creating WordPress dropdown menu all by yourself and don’t know how? Just follow our guide and learn in no time!
The beauty of this specific action is that you don’t need any plugin or coding knowledge whatsoever! You can do it all right from the WordPress core and your dashboard, and that’s exactly what we’ll teach you!
The importance of doing WordPress dropdown menu well
Also called a drop-down box and pull-down menu, the dropdown menu is one of those essential things you need on your website. Unlike old days opinions that dropdown menu is confusing and annoying, the truth is quite the opposite. Done well, it can only enhance the navigation and bring structure to the website’s layout. They are user-friendly, organized, and give your blog or a site a clean, sleek look. Not to mention, they take away the clutter of having too many items to click on within a page. You know, like too many navigation items? So, how do you make a dropdown menu in WordPress without hiring a developer?
Easy way to create a WordPress dropdown menu by yourself
To set up a dropdown menu in WordPress, there are four simple steps; all meant to be done within your admin dashboard. Simply go to Appearance > Menus and perform these steps without any coding necessary:
1. Create a new menu – unless you want to edit an existing one, in which case simply select a menu from the dropdown.
2. Add links that will show up in the dropdown menu
Choose Pages, Categories, Posts, Groups, Custom Links, or whatever you want to be seen within the menu. Once you’re satisfied with the choice, click Add to Menu button and it will show up within the menu structure.
3. Define the dropdown menu order
This is the fun part. Using the drag-and-drop feature simply drag your chosen items in whatever order you want. And if you need more structure aka subcategories within this menu, like in the parent > child order, put the things you want to be child ones underneath the parent one and it’s done!
4. Select menu location
In the end, when you’re satisfied with the overall look of your WordPress dropdown menu, it’s time to choose where you want it to be seen. The place where you set it up is either in the Manage Locations option or under the Menu Structure.
Now, depending on the theme you use, you might see and have different names for Display locations. You can either click on the Manage Locations or go underneath the Menu Structure to set up Display location. Here are some examples of common names of display locations:
- Main Navigation
- Top Menu
- Primary Menu
- Footer Menu
In the image example below, you can see how the menu is selected to be displayed in “Main Navigation”.
There’s one more feature to choose, in case you don’t want to do all this manually. Auto add pages is a feature that automatically adds new top-level pages to this menu. However, be careful with this feature, because you can easily end up with more than you need and that’s not user-friendly, nor good practice.
Congratulation, it’s done! You now know how to set up WordPress dropdown menu without coding or hiring a developer! See how quick and easy that is? 🙂
In addition, you can also set up the dropdown menu within a sidebar by merely using a widget. Just pick up Custom Menu feature, select the menu you want to be displayed and click Save. And voila!, your WordPress dropdown menu is in your defined sidebar.
Now, in case you want to see what you’re doing in real-time, all this you can do by using Manage with Live Preview option. Click on it, and you’ll head out to Customizer where you can repeat all the steps and, as a result, see instant changes as you go along.
Now, what about WordPress dropdown menu plugins?
Yes, we did say you can create a WordPress dropdown menu without using the plugin. However… There’s this semi-new type of dropdown menu called mega menu. And that is something you can’t make or create in the core, and you do need help from a plugin.
Megamenu is a more advanced type of menu. It shows all the items within an expandable menu and 2-dimensional dropdown layout. You can see them on e-commerce and big, newsy websites like Starbucks, Amazon, Buzzfeed and similar. They are an excellent choice for making the order within a large group of items, with or without images. So, if you want to have one of those, these are the plugins to use – in case your WordPress theme doesn’t support them in its core. And this is where we share that our themes do provide Mega menu functionality so, if you’re on the lookout of the new theme, might as well check out some of ours.
One of the most used dropdowns mega menu plugins that comes both in free and premium option. It’s a handy plugin that automatically creates new or converts your existing menu/s into a user-friendly, accessible mega menu.
Once you install it, the default settings are adjusted, so you just need to enable it in the Appearance > Menus section, click Save, and that’s it! Your mega dropdown menu is all set up!
The free version gives you horizontal mega menus, hover or click event to open sub-menus, supports flyouts and multiple menus and more. Pro features include features like:
- Sticky, vertical, accordion menus
- WooCommerce cart total menu item
- Menu logo support
- Custome item styling
- Automatic updates
The price for a pro plugin starts at $29 for use on one site.
Another great WordPress Mega Menu plugin that is a responsive, highly customizable drag and drops menu builder. Completely free and customizable, WP Mega menu helps you create the fantastic mega menu you can customize, change styles, and adapt to your site’s designs. Some of the features this plugin has, are:
- Drag-and-drop menu panel
- Widgets in menu
- Multiple themes/skins option
- Stretch menu
- Social icons and more.
Furthermore, it comes with the demo preview so you can check out all features for yourself:
WordPress dropdown menu tips and tricks
As said in the beginning, having a dropdown menu enhances user experience – if done right. So, these tips will help you improve your dropdown menu set up and design and give your visitors that remarkable, useful experience.
1. Make it clear and concise
It’s all about the accessibility and usefulness for your readers. Remember, you’re doing this to make it easier for users to find information. That means defining and grouping clear menus and submenus, so users can instantly know where they are and what to expect.
2. Make it useful
As several research results conclude, having too many or too little items is not suitable for a dropdown menu. If they’re long, it messes the user experience, and it’s not considered a good design. And having just a few options make dropdown menu useless and without a point.
3. Don’t clutter it
It’s regarded as a good practice to always think about your visitors, moreover not to make navigation too tricky. And by that, we mean don’t make it complicated or over depth. It might be an old recommendation, but it’s still the valid one – avoid a dropdown menu with more than two levels. It becomes tricky to use and destroys usability.
If you want to improve your content layout, to have good navigation and user experience on your website, then a dropdown menu is an excellent way to do it. It’s what helps your site look more structured and professional, and give your visitors more pleasurable experience. Now you can create one with ease and in no time!
Feel free to share this guide with your friends and look us up on social to tell us how it all went 🙂