On a site with a dozen pages, replace the mega menu with five to seven plain links in visitors' own words, a real Services page that explains each service, and a menu that works by tap and keyboard.

A panel the width of the screen

A landscaping company installs a new theme. Point at Services, and a panel drops across the whole screen: four columns of links, an icon beside each, and a photo of a finished patio.

It looks generous. It also covers most of the page, and it opens whenever the mouse passes over Services on its way to something else.

The site has twelve pages. The panel shows nine of them at once, and the other three sit in the menu bar beside it.

What a mega menu is for

Large panels of links were designed for sites with hundreds or thousands of pages: department stores, universities, big parts suppliers. Columns of links show the range of a large catalogue at a glance.

On such a site, the panel answers a real question, which is what kinds of things are here. A shopper can see that hoses sit under Garden without opening five pages to find out.

On a small site there is no range to show. Every page can already be listed in a single line.

What it does on a twelve-page site

Fitted to a small site, the panel brings the costs without the benefit:

The last is easy to miss. The photo in the panel downloads with every page, even for visitors who never open the menu at all.

Pointing is not choosing

A menu that opens on hover treats a passing mouse as a decision. Someone moving from the logo to the contact link crosses Services, and the panel drops over the page they were reading.

Careful menus wait a moment before opening and a moment before closing, so a stray pass does nothing. Many themes skip that delay, and a wide panel makes each stray pass more disruptive.

Moving diagonally into the panel can also cross the next menu item, which closes one panel and opens another. Visitors learn to move the mouse in right angles, or give up.

Phones, tablets and keyboards

Touch screens have no hover. On a tablet, the first tap on Services usually opens the panel and the second follows the link, so the Services page itself can be hard to reach.

On a phone, the theme turns the panel into a stacked list under a menu button. Twelve pages with icons become a column the visitor scrolls past before reaching anything.

Someone using the Tab key may never open a panel that appears only on hover, and a screen reader announces every link inside it. A short menu is easier for both.

A worked example

An air compressor service company sells, rents and repairs compressors for auto shops, sawmills and small manufacturers, with four technicians on the road. Its site has twelve pages.

A new theme put two large panels in the menu: Services, with eight links, icons and a photo of a technician, and Products, with types of compressors and air dryers. On phones, the menu ran to three screens.

Shop managers looking for help with a compressor down had to scroll past both lists to find the emergency number, which sat in the footer.

The menu is now six plain links: Sales, Rentals, Service and repairs, Parts, About and Contact. The emergency number heads every page, and on phones it is a link that dials.

The Service and repairs page lists each service with a short paragraph and a photo. Every link is visible at once, nothing opens by accident, and the phone menu fits on one screen.

A short menu in customers' words

For a small site, five to seven top-level links usually cover everything. Use the words customers use on the phone, not internal names: Repairs rather than Solutions, Prices rather than Investment.

Move pages such as privacy and careers to the footer. Put the phone number in the header, where people look for it.

If a service needs explaining before anyone will click it, the label is the problem, and a clearer word fixes it better than an icon.

Let the Services page explain

The large panel was trying to do the Services page's job: show what the business does, with a picture. A real page does it better, with room for a sentence on each service.

That page can be found by search, shared in an email, and read on a phone without a menu in the way. The menu only needs to get people there.

A panel is seen for a second on the way somewhere else; a page is read.

When the theme insists on a panel

Themes that come with large menus usually let you switch the panel off for one item or for the whole menu. Where the setting is missing, a developer can replace it with a plain list.

Ask for the change in a child theme, so the next theme update does not quietly bring the panel back.

The counter-case

A garden centre selling several hundred products online, or a supplier with a full catalogue, may genuinely be served by a large panel. Grouped columns show its range faster than a chain of pages.

Such a panel should still open on a click or after a short delay, close cleanly, work by keyboard and turn into a sensible list on phones. Size is not the fault; careless behaviour is.

A twelve-page site has nothing for such a panel to organise. A plain list does the same job with none of the side effects.

Trimming the menu

  1. List every page the menu links to now.
  2. Move legal and hiring pages to the footer.
  3. Group the rest into five to seven links.
  4. Rename items in customers' own words.
  5. Write a Services page that explains each service.
  6. Turn off hover panels in the theme settings.
  7. Test the menu on a phone, a tablet and with the Tab key.

Step five lets the menu shrink. Once one page explains every service properly, the menu needs a single link to it, not a panel trying to do the same job.

A menu item that opens a PDF instead of a page is a separate trap, which links that download a file without warning describes.

Frequently asked questions

What is a mega menu?

A menu that opens a large panel of links, often across the full width of the screen, with columns, icons and sometimes photos. It was designed for very large sites.

Why is a mega menu a poor fit for a small site?

With a dozen pages there is no range to organise. The panel repeats every link at once, opens by accident, covers the page and grows long on phones.

How many links should a small site's menu have?

Five to seven top-level links usually cover a small business site, named in customers' words, with legal and hiring pages moved to the footer.

Why do hover menus cause problems?

A passing mouse opens them over the page, touch screens cannot hover, and keyboard users may never open them. Short delays and tap support help, but only partly.

Does a photo in a closed menu slow the page?

Usually, yes. An image inside a hidden menu panel downloads with every page, whether or not the visitor ever opens the menu.

When does a large menu make sense?

For sites with hundreds of pages or products, where grouped columns show the range. It should still open on a click or after a delay and work by keyboard.

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.

A theme menu bigger than the site?

Send us a link, and we will sketch a plain menu that fits your pages and works on phones.

Start a Conversation