How to Create a WordPress Dropdown Menu without Code

Is there an analogy to be made between a pizza delivery business and your website’s menu? You will probably say no, but there is a funny but functional analogy.

Pizza is your content while the delivery person is your website’s menu.

It’s probably true that no matter how good the pizza is, you won’t order it if the delivery takes four or five hours. The faster the pizza’s delivered, the greater the satisfaction is. Well, your website visitors feel the same way about your content.

Your content can be the best, but users won’t consume it if it’s inaccessible, hard to find, or delivered in an untimely manner.

The pizza business manager trains the delivery person to deliver the orders as fast as possible to satisfy the clients. Your website menu does the job of a delivery boy; it drives the user to the desired destination in no time.

A functional menu considerably increases a website’s revenue.

Creating a menu for a small site is pretty simple, but it’s ten times harder for a big website. The best solution is to create a dropdown menu. Luckily there are great plugins available to help you to create a dropdown menu without code.

How to Create a Dropdown Menu

Within your WordPress dashboard, go to Appearance > Menus, click on Create a Menu, and name your menu.

create test menu in WordPress

Check Screen Options and tick all the boxes. You make sure that all the options are available for your menu.

screen settings menu in WordPress

Depending on your preferences, add sections to your menu. Select them from the left list by ticking the check boxes and clicking Add to Menu. These can be posts, pages, projects, categories, custom links, tags, project categories, and project skills.

For learning purposes, I created a menu made up from a homepage and four sections.

WordPress example menu

Next, chose the items you want to place under the first section. They should appear below your last section once you have selected them.

The next step is to drag the items from below the first section and put them not in line with it but to the right. See the image below to get an idea of what I mean. Proceed in the same manner for each section.

WordPress submenu example

You can add new subordinate items for each item in the sections (level 3 hierarchy). In my example, I added Themes, Plugins, Hacks, and Tutorials under WordPress. All you have to do is select the items and drag them below and to the right of the main item.

WordPress deeper sub menu navigation example

You have finished your menu, but you have a few check boxes below it. Tick the first check box if you want new top-level pages to be automatically added to your menu. However, I don’t recommend using this option. You may hurt your website’s design by mistake.

Depending on the theme, you will have one or more menu display locations (i.e. primary and footer). Tick the checkbox for your desired location.

WordPress menu options

There is a second way to choose the menu location. Go to Appearance > Widgets and add the Custom Menu widget to your sidebar or widgetized area.

custom WordPress widget

It heavily relies on your theme, but you can also tweak your dropdown menu and chose its locations by going to Appearance > Customise > Menu.

How to Edit and Delete a Dropdown Menu

If you thought that creating a dropdown menu was a breeze, editing and deleting a section is even simpler.

Just go to Appearance > Menus and click on the down arrow of the section you want to edit.

You can to modify the navigation label, move it up or down, or remove it from the menu.

Additionally, you can reorder the sections and items by dragging and dropping them.

edit WordPress menu

Plugins to Create Dropdown Menus

You can create a dropdown menu without code, but the customisation options are limited.

Luckily, many plugins give you additional options to create a dropdown menu. Here I have listed three plugins that fully deserve your attention.

Max Mega Menu

Max Mega Menu is a plugin that gives you unlimited powers to customise your menu. You don’t have to write any lines of code – the drag-and-drop editor does it all for you. Amongst many cool features, Max Mega Menu is built for mobile users. It’s touch optimised, and you have plenty of options to create a mobile-friendly menu.

Mega Menu by WooRockets

This plugin is a reliable alternative to the previous one. It’s also focused on providing a good mobile experience. At the same time, desktop users aren’t neglected at all; you have a plethora of options to create a super friendly menu. It lets you create vertical and horizontal menus and use different icon display options (text, image, or both). The plugin is suitable for everyone. The drag-and-drop builder and live preview are all you need to set up a good menu even if you are a less experienced user.

UberMenu

I believe that a creative mind and a free plugin can do as much as a premium plugin. This is why our team suggests the best free themes and plugins. However, UberMenu convinces me that it’s a unique and powerful mega menu. You can do everything you want with this plugin!

Tips to Create a User-Friendly Menu

Creating a dropdown menu is only half the battle. Making it efficient and user-friendly is another step in your quest to satisfy your visitors. There is no magical recipe for crafting the perfect menu, but these tips have been widely applied in all successful menus.

Don’t Use More Than Seven Menu Sections

No matter the size of your website, limit the menu to less than seven sections. It’s useful for both search engine crawlers and users.

Search crawlers won’t rank your pages highly if your homepage has too many links. The more links it has, the more diluted the “link juice” is that’s passed to internal pages.

Users won’t be happy either. UX researchers proved that the human attention span is limited to seven items, so a long menu isn’t effective.

Be Specific and Not Generic

You have probably seen menu sections called ‘Services’, ‘Products’, or ‘Team’ many times. I don’t mean to say that choosing these titles is wrong, but they certainly aren’t good.

First, no one searches for keywords such as ‘products’ or ‘services’. You waste your chances of getting more traffic by using generic titles in your menu.

Instead, use descriptive titles to make the search crawlers understand what your website is about. ‘WordPress plugins’, ‘WordPress themes’, or ‘WordPress hacks’ is a good starting point for a WordPress blog’s menu.

No More Than Three Levels Deep

Some User Experience experts say that dropdown menus hurt a website’s usability. The real issue is that, in many cases, dropdown menus aren’t necessary.

It’s important to make a clear distinction: that dropdown menus aren’t bad; rather, their implementation is sometimes lacking.

Use a dropdown menu for complex websites and don’t go more than three levels deep.

The Order of the Menu Sections is Capital

Have you ever heard about the serial position effect? You most likely haven’t, but you heavily rely on it.

This principle says that people have the tendency to recall the beginning and end of an array. In our situation, users will remember the first and the last sections of a menu.

Now you understand why Home and Contact are the first and last sections of a menu 99% of the time. Add the most important sections to the beginning and/or end.

After reading this post, you should be able to create a dropdown menu without code and have an idea about how a menu should look.

It’s not simple to craft a user-friendly menu, and you will need to test and polish your menu many times to nail it down.

Please engage with us and share your experiences and ideas about dropdown menus. We are waiting for your contribution.

Exclusive 7 Day Course

Defend your site from hackers, improve your website speed, get free uptime monitoring and learn tactics used by WordPress experts

Many thanks for subscribing.

Something's not right.

About Daniel Pintilie

Daniel PintilieDaniel is an Internet geek focused on writing actionable content. He loves showcasing WordPress tricks and tips and online marketing strategies. In his spare time, Daniel reads history books and plays football.

Leave a Reply

Exclusive 7 Day Course

Defend your site from hackers, improve your website speed, get free uptime monitoring and learn tactics used by WordPress experts

Many thanks for subscribing.

Something's not right.