SiteSmith

Website menu: how to organize your navigation

SiteSmith · · 5 min read

A small business website menu works best with five to seven items, labeled in the words your customers use, in the order they would look for things: what you do, proof you do it well, who you are, how to reach you. Put your phone number or a contact button where it can always be seen, and make sure the menu opens and closes cleanly on a phone. That is most of what good navigation means for a local business.

What a menu is for

The menu is the table of contents for your site. A visitor glances at it to answer two questions: "Does this business do what I need?" and "Where do I go next?" If the labels are vague, or there are so many items that they blur together, visitors either guess or leave.

The goal is not to list every page. It is to give each kind of visitor an obvious first step.

Keep it short

Most local business sites need only these:

  • Home (often just your logo, which links home)
  • Services (or the name of your main service if you only have one)
  • Work, Gallery or Projects, if photos matter in your trade
  • Reviews, if you have a good number of them
  • About
  • Contact

Some businesses swap or add one item that customers look for specifically: Menu for a restaurant, Schedule for a studio, Book for a salon, Pricing if you publish prices, Service area if where you work is the first question callers ask.

Seven items is a sensible ceiling. Beyond that the menu wraps onto two lines on smaller computer screens and becomes a long scrolling list on phones.

Use plain labels

Label each item with the word a customer would say:

  • "Services", not "Solutions" or "What we offer you"
  • "About", not "Our story" or "The journey"
  • "Contact", not "Let's talk" or "Get in touch with our team"
  • "Reviews", not "Kind words"
  • "Gallery" or "Our work", not "Portfolio showcase"

Clever labels cost a second of thought each. On a phone, with a customer in a hurry, that second matters. Plain words also help screen readers and help Google understand what each page is.

Put items in the order people need them

Customers generally want to know, in order:

  1. What you do (Services)
  2. Whether you are good at it (Work, Reviews)
  3. Who you are (About)
  4. How to reach you (Contact)

Put Contact last, where people expect it, and also make it stand out: a button style, or your phone number next to the menu. Many owners put the phone number at the top right of every page as a tappable link. For a trade where people call, that is the most used part of the whole site.

If you have several services, it is tempting to put every one in a drop-down under Services. That can work for four to eight services. Past that, drop-downs get long and fiddly, especially on phones where they become nested lists.

A simpler option: make "Services" one page that lists every service with a short description and a link. The menu stays short, and the services page does the explaining. Writing a services list that doesn't overwhelm visitors shows how to lay that page out.

Avoid drop-downs inside drop-downs. Avoid menu items that only open a drop-down and are not pages themselves; visitors who click "Services" expect to land on a services page.

How the menu should work on phones

Most of your visitors will see your site on a phone, where the menu usually hides behind a button with three lines or the word "Menu". Check these things on your own phone:

  • The menu button is easy to find and tap. Top right or top left, big enough for a thumb.
  • The word "Menu" next to or instead of the three-line icon helps older visitors who do not recognize the icon.
  • The phone number or call button stays visible without opening the menu.
  • The menu opens fully and you can scroll it if it is long.
  • It closes easily, with a clear X, and closes when you tap a link.
  • Nothing hides behind it. Some sites have a menu that opens on top of the page but leaves part of the page clickable underneath, or a chat bubble that covers the bottom items.

The footer at the bottom of every page is where people look for things that are not in the top menu: Careers, Gift cards, Privacy, Service area, FAQ. Put secondary pages there instead of crowding the top menu. A visitor who scrolls to the bottom gets a second chance to find what they need.

Signs your navigation needs work

  • Customers call to ask things that are on your site, because they could not find them.
  • Your menu has items named after things only you understand, like the name of a package or an internal department.
  • You have pages that are not in the menu, not in the footer and not linked from any other page. Those pages are nearly invisible.
  • The menu has more than eight items, or items with drop-downs that also have drop-downs.
  • On your phone, the menu covers the screen and will not close, or the call button disappears when you scroll.

Planning the menu before you build

If you are redesigning, write your menu on paper before anything else. List every page you have, then sort them: which belong in the top menu, which in the footer, which can be combined or dropped. How to plan your new website's pages before a redesign walks through that sorting. If you are moving from an old site, the old page addresses should keep working even when pages move in the menu or are merged.

What to do this week

  • Open your site on a phone and on a computer, and write down every menu item.
  • Count them. If there are more than seven, decide which can move to the footer or merge.
  • Rename any label a customer would not say out loud.
  • Reorder: services, proof, about, contact.
  • Check that your phone number is tappable and visible at the top on a phone.

If your current menu has grown into a maze over the years, you can see your site rebuilt first with a short, plain menu, and move things around from there.

Keep reading