Menus and navigation

Use the words your visitors use

Name menu items the way your visitors would say them out loud, not the way your team talks in meetings. “Prices” is clearer than “Solutions”. “Delivery and returns” is clearer than “Customer care”. Keep each item to one or two words, and avoid two items that sound almost the same.

Most sites get by with five to seven words in the top menu. If you have more, put some of them into groups. Before you settle on the names, try them out on three people. Ask where they would click to find your opening hours, then keep quiet and watch. Their first click will tell you more than an hour of discussion.

Show where people are

Mark the menu item for the page someone is on. Bold text or a line under it works well. Colour alone is not enough, because some people can’t see the difference. Developers can also add aria-current="page" to that link so screen readers say “current page”.

The big heading on the page should use the same words as the menu item that led there. If the menu says “Prices” and the page heading says “Flexible plans for every team”, people wonder if they clicked the wrong thing.

The three-line menu button

That little button with three stacked lines, sometimes called a hamburger, is everywhere now. It earns its place on a phone, where every centimetre counts. A computer screen has room to spare, though, so tucking the menu away there just hides your pages, and visitors tend to ignore what they can’t see.

On phones, it helps to write the word “Menu” next to the three lines, because not everyone knows that sign. If you only have four main sections, you can often show them as a bar along the bottom of the screen instead.

Breadcrumbs on bigger sites

Picture a shop site with shelves inside shelves. Above the product name, a thin line of words such as Home › Shoes › Running shoes tells the visitor which shelf this item sits on. Every word in that line can be clicked except the final one, because that is the page already open. Someone who landed here straight from Google can tap “Shoes” and browse the whole shelf, instead of going all the way back to the start.

Search, when there is a lot to find

If your site has more than a few dozen pages, add a search box and keep it in the same place on every page, usually at the top on the right. On a computer, show the box itself and not just a small magnifying glass. When a search finds nothing, don’t stop at “No results”. Suggest another spelling or show a few popular pages.

Help for keyboard users

Some people never use a mouse. They move through the page with the Tab key. For them, the first thing on every page should be a link that says “Skip to content”. It can stay hidden until they press Tab. Without it, they have to go through the whole menu again on every single page.

Pressing Tab should also move through the page in the order things appear on screen, from top to bottom and left to right.

A footer that helps

People who scroll to the very bottom are often still looking for something: a phone number, opening hours, delivery terms, the return policy. Put those in the footer in normal-sized, readable text. Tiny pale grey writing at the bottom isn’t a footer, it’s a hiding place.