4 Alternatives to a Drop-Down Menu That Will Improve Your Website

Last updated: February 16, 2022

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 find stuff.

But then you put your website owner hat on and – bam! – you’re 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, let’s 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 in 90% of the cases 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.

Also, the longer your list options, the harder it is for your prospects to make a choice:

But that’s generally speaking.

Let’s look at the common examples of website navigation drop-downs 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:

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:

• they think the top-level item is not a link but a plain text, which is the case on many websites
• they get distracted by the new stuff that just dropped down

What’s the alternative?

If your drop-down menu consists of 1-2 list 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).

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

Example B:

Imagine, you landed on this website.

What’s the probability that you’re dying to learn about their values, mission and endorsements? Can you see yourself clicking on each and every drop-down list item?

#hellno

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 once and just scroll down reading.

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

And 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!

Wonderful, wonderful user experience!

#noitsnot

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 or making Google unhappy.

#notgood

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? Follow this fail-proof About page creation process. It even comes with an About page template:

But ok, let’s say you don’t have a drop-down menu under your About navigation label.

What about Services?

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

Example C:

Imagine, you landed on this website.

You want to learn about their services, hover over the Services navigation label, 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 navigate 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.

And with your dropdown menu being, and its list items being unclear, your prospects will have a hard time making a decision.

No wonder they won’t check many of your service pages. Maybe one or two, but that would be it.

And this was only on desktop!

On mobile, if you don’t implement your drop-down navigation layout properly, your poor website visitors will end up with an endless list of links and an overwhelming number of options:

What’s the alternative?

1) If you offer more than 3 services AND/OR your serivces have longer titles

Let your website visitors decide in peace what services they’d like to check out, without the 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 for every service
• In your navigation, link only to your main Services page without any drop-down lists

2) If you offer only a few services:

• either omit a “Services” navigation label altogether and link to the single service page directly from your top-level navigation.
• or give your services very clear, short and distict titles, and use a drop-down menu:

Like with any navigation options, make sure your drop-down list offers mutually exclusive options. Otherwise, your prosepcts make get confused:

❌ Content creation – Website copywriting – For agencies

Wait, isn’t web copy also content? I’m an agency owner who needs blog posts written. Where do I click?

✔️ Blog posts – Website copy – Printed materials

Ah, this is clear. Those three are disjuoint options.

3) Combine the two approahes

• group your services by topic
• use a short and clear drop-down menu under Services
• make each drop-down list item link to a dediced page that features multiple services

Example:

In my navigation bar, I have a short drop-down menu under Services. The label “Website review” leads to this page that features 3 specific services and offers links to dedicated service pages:

Reason #4: You drive your website visitors insane

I’ll just leave it here:

#facepalm #nowords

What’s the alternative?

If you’re absolutely sure you need many links in your navigation, and they don’t fit on the top level, implement your whole navigation menu as a mega menu.

Don’t be shy to give all the links enough space on the screen making it full-width. Style your menu to make it easy to scan using different fonts and icons.

Something like this:

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
   • or, use a short and clear drop-down menu, making sure its list items offer mutually exclusive options
4. If you have no choice but to offer your visitors many navigation menu options, use a mega menu.

Whatever you do, make sure you keep your navigation menu 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… 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.