4 Reasons Your Website Drop-Down Menu Has to Die (and What to Do Instead)

You know what I find fascinating? How so many website owners seem to have a multiple personality disorder.

Here you are as a website visitor, swearing at your laptop when some websites make it difficult for you to do or find things.

But then you put your website owner hat on and BAM – a totally different person! All that stuff you found irritating on other websites now proudly lives on yours!

I don’t know the reason for this peculiar behavior, but I know that we need to cure this.

So today, I’d like to talk about one of those things you find irritating on other websites but still have on yours:

Website drop-down menus in navigation

In particular, why you need to get rid of them and what are the alternatives.

Let’s start with this:

Making users suffer a drop-down menu […] is one of many small annoyances that add up to a less efficient, less pleasant user experience. It’s worth fixing as many of these usability irritants as you can.

But that’s generally speaking.

Let’s look at the common examples of website drop-down menus that drive your visitors insane. They’ll also illustrate the 4 reasons why your drop-down menu has to die.

4 reasons your drop-down menu has to die (and what to do instead)

Reason #1: Your visitors may skip important pages

Example A:

Drop-Down Menu: Example 1
Raise your hand if you’re 100% sure you’re going to click on “My Story”.

Imagine, you landed on this freelancer website.

You want to learn more about them and hover over that navigation label. What are the chances you’ll click on “My Story” label?

How does this harm your website?

Website visitors are humans, and humans are the creatures of habit. And their habit is not to click on the top-level item of a drop-down menu because:

  • in most of the cases, it’s not a link but a plain text
  • they get distracted by the new stuff just dropped down.

What’s the alternative?

If your drop-down menu consists of 1-2 items:

  • either promote the links from the drop-down to the top-level navigation items
  • or remove them altogether (for example, removing the Testimonials page from your navigation and website is generally a good idea).
Gill Andrews

Find out what else to improve on your website!

Get a professional website critique.

Learn more

Reason #2: You make your visitors work for it + you’ve created thin content

Example B:

Drop-Down Menu: Example 2
On a scale from 0 to 10, how excited are you to click on “Our mission” or “Our values”?

Imagine, you landed on this website.

What’s the probability that you’re dying to learn about their values, mission and endorsements?

But the problem here isn’t only the irrelevant sub-labels. It’s much worse.

How does this harm your website?

1. You’re asking your visitors to do a lot of work to learn about something simple,

…which means they aren’t going to do it.

Your visitors just want to learn more about you – ideally, to click somewhere and just scroll down reading.

But noooo, you’ve decided to make them work for it!

Let me tell you how this is going to work out. Here’s what someone who wants to learn more about this business will have to do:

  • Hover over “About” navigation label.
  • Click “About us”.
  • Scroll down to read.
  • Scroll up (which is especially fun on mobile where the pages are taller).
  • Hover over “About”.
  • Click “Our values”.
  • Scroll down to read.
  • Scroll up.
  • Click “x” to close the browser tab BECAUSE NOBODY AIN’T GOT TIME FOR THIS!

2. You’ve created pages with thin content.

If you’re a one-person business or a small agency, there is no way in hell you have so much to tell about your values and mission that it’ll justify creating separate pages.

In this particular example, About us, values and mission pages have 150 words on average each. 3 pages with just 150 words that aren’t helping your visitors and making Google unhappy.

#notgood

Drop-downs unrelated tip: There are few things that kill your visitors’ enthusiasm faster than “Our mission” and “Our values”.

What’s up with the corporate speak? Talk to your website visitors like a normal person! Or do you talk like this in real life when people ask you about your business?

What’s the alternative?

Write one solid About page where your visitors can find everything you’d like them to know by simply scrolling down. This way, the chances that they actually read everything are much higher.

Worried that it will be too much info for one page?

Writing a great About page is damn hard. It took me 3 days to write mine, and I only managed because I used the process from Henneke Duistermaat’s insightful post and had her hold my hand through her incredible book “A Pain Free Process for Writing Your ‘About’ Page”.

This quick checklist is also helpful (so I hear):

Website Content Checklist: About Page
Click on the image to get the checkpoints as proper text with checkboxes.

But ok, let’s say you don’t have a drop-down menu for your About section.

What about Services?

Reason #3: You make it hard to find relevant info

Example C:

Drop-Down Menu: Example 3
Big Clever Marketing, if you’re listening: This is definitely big, but I’m afraid not very clever.

Imagine, you landed on this website.

You want to learn about their services, hover over the Services menu, and this beauty drops down.

Your next move?

Probably clicking the “Services” label hoping to get to a page where you get the services listed together with more text.

Gotcha! No such thing. It’s just a text.

So, you need to decide NOW which of the services you’d like to learn about.

Not a quick decision to make, especially because 4 out of 6 services have the word “marketing” in them.

But ok, you click on “Marketing Audits” and start reading.

Want to learn about other services?

Prepare to scroll, hover, select and click, my friend.

Want to go back to the first service you found interesting?

Which drop-down item was it again? Nope, not this one. Try again!

#omg #thisisnuts

How does this harm your website?

Your visitors may miss a service they actually need (and you may lose money).

The main problem here is that there is no dedicated space where your services get all the attention of your visitors.

You’re asking your visitors to select one of the services while they’re surrounded by the rest of your website with its visual distractions.

They can’t focus like that!

No wonder they won’t check many of your service pages. Maybe one or two, but that would be it, also because you’re asking them to do all the scrolling-hovering-selecting-clicking exercise.

What’s the alternative?

Let your website visitors decide in peace what services they’d like to check out, without a pressure of a soon-to-disappear drop-down or distractions of other links:

  • Create a page titled “Services”
  • Feature your separate services on it with an enticing paragraph and a visually prominent link to the corresponding page per service
  • In your navigation, link only to your main Services page wihtout any drop-downs

or

  • If you offer only a few services, consider omitting a “Services” navigation label. Link directly to the single services from your top-level navigation.

So, basically you would go from this:

Drop-Down Menu: Original
Many links with little context on a drop-down menu that disappears as soon as you move your mouse away. Quick! Make a decision now!

…to no drop-down under Services navigation label that links to this:

A Dedicated Services Page
Your “Services” page: A Dedicated space for your visitors to make an informed decision on what to check out next. No hurry. No distractions.

Reason #4: You drive your website visitors insane

I’ll just leave it here:

Drop-Down Menu: Example 4
#facepalm #nocomment

What’s the alternative?

If you’re absolutely sure you need many things in your navigation, and they don’t fit on the top-level, use mega menus with different fonts and icons to make them scannable.

Something like this:

Mega menu example
I stole this images from this great article by Nielsen Norman Group on mega menus as an alternative to a drop-down menu.

To sum it up:

4 alternatives to a drop-down menu that will improve your website

  1. If you have only one drop-down item:
    • either put it as a top-level navigation item
    • or remove it.
  2. If it makes sense, combine the info on the separate pages from the drop-down menu and make one page out of it (for example, if you have a drop-down menu under “About” top-level navigation item).
  3. If you have a Services drop-down menu:
    • either use only a top-level “Services” item that leads to a dedicated “Services” page
    • or, if you offer only 1-2 services, remove the “Services” navigation item and link to the corresponding services directly from your top-level navigation.
  4. If you feel you need a crazy long drop-down, use a mega menu.

Whatever you do, make sure you keep your navigation short, descriptive and clear.

Final words of wisdom

Being a regular person who needs to book a vacation or buy a pair of shoes from time to time gives you a unique opportunity to learn about what makes a great website every day… without spending extra time on it.

Be a mindful website visitor.

Next time you’re checking someone’s website to learn more about them or to find their return policy, notice what irritates you. What information is missing. What’s hard to read.

Then think about your website. Chances are, you’re making the same mistakes.

That, and also kill your drop-down menus.

A blog post can only get you so far…

Want to find out what else you can improve on your website? Get a professional website critique!

View Packages

6 Comments

Leave a Reply

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

  1. You didn’t address using in page anchors for example with the services you mentioned. I’d assume they’re a good thing?

    1. Hi Nathaniel. I’m not sure what you mean by “in page anchors”. Are you talking about on-page navigation? If so, I didn’t address this as it has nothing to do with the topic of the post (the drop-down menus).

      When it comes to your website, whether something is a good thing or not, in most of the cases depends on how you use it. But yes, used wisely, the in-page navigation may improve the user experience.

    1. I guess it does 😄 For a personal website, there is absolutely no reason to use a drop-down menu, and you (and your visitors) are better off if you reorganize your pages. Glad you found this article helpful, Alexei.