When Dropdown Menus Are Just Wrong – Solutions For WordPress

Please Share:

Drop Down and Give Me Twenty Menu Items?!

Dropdown menus are a good way to annoy your website visitors, and they’ve been doing it for years! The truth is, they can be handy, but there tends to be an irresistible temptation to make them gigantic. I’m going to talk about the problems caused by this and offer possible solutions.

Man eating sandwich with 1000+ slices of bacon. He likes his menus stuffed that tight, too.
Man eating sandwich with 1000+ slices of bacon. He likes his menus stuffed tight, too.

Examples of funny things people have put on their sites – links to them get stuffed into site menus:

  • Every company brochure (bonus points for each PDF)
  • Multiple photo sliders filled with every phone photo ever taken
  • A profile of every company employee (bonus points for each one’s pet)
  • A list of the boss’s favorite colors and movies. Yes, I was asked to put that on a site once. Some marketing person must have told him that it would make him seem relatable.

Do those sound interesting to you? Me either. Still, it’s possible to have worthwhile stuff in a menu, too. Combine that with the treasure trove above, and you end up with a massive menu if you do a new page for every item. We site owners believe that every bit of our content is precious, so more is always better.

Size Isn’t Everything If It’s The Only Thing

Except that it isn’t. To your visitors, these huge dropdowns are a navigation nightmare, even if they seem to work. The simplest problem is a dropdown that’s just too long. It’s easy to miss the target when you’re trying to click on an item, and of course they may go right off the screen: a usability nightmare that you may not even notice if you tend to look at your site on a desktop computer.

Annoy Visitors And Sell Nothing

What’s even worse: using multiple levels. 2, 3, 4 or even more. These are the menus that not only drop down vertically, but also fly out horizontally. Anything wide will tend to compromise a site on mobile. Menu items just vanish altogether, or at least are hard to get to. People leave sites very fast that are hard to use, and there goes any sales!

What’s a site owner to do? There’s no need to rule out dropdowns. It’s a way to keep related things grouped, or to show hierarchical data. If a dropdown contains under 5 items you may be OK. I like to keep it down to 2 or 3. Or banish them entirely!

Their sub menu could cause agita. Caveat emptor!
Their sub menu could cause agita. Caveat emptor!

SubMenus Are An Answer To the Overcrowding Question

But what if you have lots of pages, they truly are important, and you want to group them? It’s possible to make this work with a submenu. A nice scheme for that goes like this: you have a main horizontal menu, and a space below it for the submenu. You click on a main menu item, and if there are other items that are “children” of that item, they appear in the submenu just below the main menu.

No dropdowns, just a submenu that doesn’t vanish when you’re trying to click on it! If properly coded, this eliminates both the “too tall” and “too wide” problems. I’ve written a tutorial on how to put one of these together for WordPress. The example does use Genesis, but you can do this with nearly any WordPress theme if you’re skilled.

Submenus are my favorite way to deal with large menus. But they are tricky to put together, even if you’re geeky. For a very quick example go to my demo page and click one of the links in the upper left corner.

Not a sidebar, but a very impressive Antalya Side in Turkey
Not a sidebar, but a very impressive Antalya Side in Turkey

Sidebar, Please, Your Honor

Another nice way to organize data is to have a sidebar menu showing child pages of your current page. For that method, here’s a method that’s much easier than the above scheme! No code needed! Just install Advanced Sidebar Menu, put its widget into your sidebar, change settings to taste, and relax! I actually began coding this concept from scratch, and got just about as far, but this has more control and extra features.

Our middleman is content to be right in the center of things
Our middleman is content to be right in the center of things

Stuck In The Middle With You

You want more? How about putting links to child pages right in your page content? Install the clever List Pages Shortcode plugin, and just put this shortcode into your page content. Try to give it a line by itself – it’s easy to butcher shortcodes. You can always correct it by clicking “Text” instead of “Visual” in the editor:

[child-pages]

This deceptively simple plugin has a lot of additional features you can add by using additional shortcode parameters, probably more than you’ll need. It’s hot! I should also note that in many themes you could add its shortcodes to widgets for sidebars, footers, header, and so on.

Mega_man_logo
Go big! Don’t restrain yourself!

MegaMenus – More Is More

Still not satisfied? Really?  😉 Maybe you haven’t bought into my minimalist concept. Well, you have, but your client hasn’t. I know, I know. If you want to go really big, try a Megamenu. Due to their extra features, it’s possible to display a huge number of menu items and still have it be usable! Not only that, but many schemes will allow you to add photos, videos, all sorts of styling bits, etc. For an advanced example, hover over the largest links at the top of the Food Network site.

These are so complex that coding one from scratch would be an enormous job, so take advantage of someone else’s code for this. The Enlightenment theme actually has megamenu features built-in, and there’s a free version! If your heart is already set on a theme, you can try the Ubermenu plugin. In fact, megamenus are so complex that even with these tools, people sometimes have trouble setting them up, or the menu may have compatibility problems with other plugins. But if you have to have ginormous menus, give them a look.

Let’s all do our part to eliminate dropdowns, and tell us how you made out in the comments!

2 Comments


  1. I agree totally with what you’ve written Dave. And thanks for your help with addressing this issue with the work you did on my website.

    An example page where you added a menu of the sidebar occurs at this page – http://www.faithandhealthconnection.org/the_connection/

    Often additional secondary menus are important when a website does have LOTS of important content that the owner wants the visitor to be able to navigate to.

    Appreciate you sharing your insight on this important topic. Keep doing the great work that you do!

    Reply

    1. Hi Dale!
      It’s good to see you over here!

      Thanks very much for weighing in. And yes, your page is a good example of having a large variety of content, yet it can all be readily found and easily clicked on.

      Thanks, Dave

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *