Interested in creating a 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
This is one of the very popular questions on Google and throughout WordPress related forums. To set it up all by yourselves, there are four simple steps, all meant to be done within your admin dashboard. So, here goes.
How to create a WordPress dropdown menu in WordPress?
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, that is, 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 the Display location. Here are some examples of common names of display locations:
- Main Navigation
- Top Menu
- Primary Menu
- Footer Menu
- Etc…
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 a WordPress dropdown menu without coding or hiring a developer! See how quick and easy that is? 🙂
Bonus tip
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 a 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.
Max Mega Menu
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
and more.
The price for a pro plugin starts at $29 for use on one site.
WP Mega Menu
Another great WordPress Mega Menu plugin that is a responsive, highly customizable drag and drops menu builder. Completely free and customizable, the 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:
Hero Menu
Hero Menu is a premium WordPress plugin that lets you create a custom drop-down menu with just a few clicks. It’s compatible with WooComerce and, furthermore, comes with support to various This plugin provides responsive Android, iOS, and Windows 8 devices. Very easy to use, simply choose your menu structure by switching on or off what you need, add elements with drag-and-drop features and build the dropdown menu of your dreams! There is 60 custom-created colors presets to choose from, 270 free icons to use for your navigation and more.
The price for the Hero Menu plugin is $20, and it comes with 6 months’ support.
WP Mobile Menu
If you’re looking to up the look on your mobile site, this is the WordPress dropdown menu plugin to use. It’s a freemium responsive mobile menu builder that comes in various options for you to choose from, as well as these cool features:
- Naked header
- Background image for the menus
- Logo/Text Branding
- Google fonts and more.
Premium version comes with more features like alternative menus per page, header live search and banner, footer menus and much, much more. The price starts at $4.99/month.
Responsive Menu
Responsive Menu is a freemium dropdown menu plugin that is highly customizable as well as easy to use. It comes with over 150 customizable options that help you come out with the unique dropdown menu design! No need to know any coding to use it, simply follow the guidelines, and you’re good to go! Basic features include:
- Text, background, border color customization
- Choice of menu animations
- Choice of which Menu to use
- Integrated fully customizable search
- Menu background image and more.
Premium version comes with more options, such as:
- Desktop menu customization
- Flip button animation
- Custom font icons
- Alternative link animations
- Megamenu style
- Styled search box
- Accordion animation on sub-menu items and more.
The price starts $29.99 for one site.
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 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.
Conclusion
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 gives your visitors a more pleasurable experience. Now you can create one with ease and in no time! Hopefully, both these tips and dropdown menu plugin recommendations will help you find the perfect choice for your blog or site.
Feel free to share this guide with your friends and look us up on social to tell us how it all went 🙂
