How to design website navigation that people can actually use.
Navigation is how visitors find what they came for. This guide shows how to design it in six steps: list the pages, group them by what visitors want, name them plainly, keep the menu short, plan for phones and test it with real people.
- Group pages by what visitors want to do, not by how the business is organised.
- Use plain names, and keep the main menu to about five to seven items.
- Design for a thumb on a phone first, then test with someone who has never seen the site.
6 min readPublished By Domeq Solutions
Why does navigation matter?
A visitor arrives with a question: what do you do, how much does it cost, how do I contact you. If the menu does not help them answer it within seconds, many leave. Navigation also tells search engines how pages relate, so a clear structure helps people and search alike.
Good navigation feels invisible. People find what they want without thinking about the menu. Bad navigation makes them think about nothing else.
Good navigation is the one thing visitors only notice when it fails.
What are the steps?
These six steps work for a new site and for fixing an existing one. They put visitors' needs first, and the organisation chart last.
From a list of pages to a tested menu.
List
Every page you have or need.
Group
By what visitors want to do.
Name
In plain words customers use.
Trim
Keep the main menu short.
Plan for phones
A menu a thumb can use.
Test
Watch a real person try.
The steps in detail.
List every page
Write down each page the site has or needs, from services to contact to legal pages. A sitemap is a good starting point.
Group by what visitors want
Sort the pages by tasks, such as find out what you offer, see the work, learn, and get in touch. Group names should match the visitor's goal.
Name each item plainly
Use the words customers use. 'Services' beats 'Solutions', and 'Contact' beats 'Let's connect'. Clever names slow people down.
Keep the main menu short
Five to seven top-level items is a sound guide. Put the rest in a footer or beneath a group, and give the most important action its own button.
Design for a phone first
Menus on a phone need large tap targets, a clear way to open and close, and enough space between items. Test with a thumb, not a cursor.
Test with a real person
Ask someone who has never seen the site to find three things while you watch quietly. Where they hesitate is where the menu needs work.
Which menu patterns work?
A few patterns cover most sites. Choose the simplest one that fits the number of pages you have.
Three common menu patterns compared.
| Aspect | Simple top menu | Mega menu | Hamburger menu |
|---|---|---|---|
| Best for | Sites with a few clear sections | Sites with many pages in groups | Phones, and minimal designs |
| Strength | Everything visible at once | Shows depth without a second click | Saves space |
| Risk | Runs out of room as the site grows | Overwhelming if overloaded | Hides the options, so fewer people use them |
| Tip | Keep to about five to seven items | Group clearly, and keep it keyboard friendly | Use on a phone, and show the key action outside it |
Domeq's own site uses a simple menu with a services mega menu and a clear primary button.
How can you check your own menu?
A short checklist shows quickly whether the basics are in place.
Eight checks for a menu.
- A first-time visitor can find what you offer and how to contact you within seconds
- Menu names are plain words that customers use
- The main menu has about five to seven items
- The most important action stands out as a button
- The current page is clearly marked in the menu
- The menu works with a keyboard, and every link can be reached with the Tab key
- On a phone, tap targets are large and the menu opens and closes clearly
- Breadcrumbs or a clear back route show where a visitor is
Which navigation mistakes are most common?
The same few mistakes appear on many sites.
Six navigation mistakes.
Organising by the company's structure
Visitors do not know or care how departments are arranged. Organise by what they want.
Too many items
Twelve choices slow decisions. Cut, group or move some to the footer.
Clever labels
A label that needs explaining is a label to change.
Menus that need hover
Hover does not exist on a phone. Make every menu work by tap and by keyboard.
No sign of where you are
Without a marked current page or breadcrumbs, visitors get lost on a larger site.
Burying the contact route
A visitor ready to enquire should never have to hunt for how.
Where does professional design help?
Navigation sits where design and structure meet. Domeq's UI/UX Design work shapes the layout and flow, and Website Design & Development builds it, fully responsive and tested on mobile, tablet and laptop. A clear structure also supports SEO. See the website design myths for more on how people really use a site, and the free website audit for a quick read of your own.
Questions, answered.
What makes good website navigation?
Pages grouped by what visitors want to do, labelled in plain words, with a short main menu, clear marking of the current page and a layout that works well on a phone.
How many items should a website's main menu have?
About five to seven is a sound guide. If you have more pages, group them under a few headings, or place less important ones in the footer.
What is a mega menu?
A large dropdown that shows many links in groups at once. It suits sites with many pages, but it needs clear grouping and must work by tap and keyboard, not only by hover.
Should I use a hamburger menu on my website?
It is common on phones, where space is tight. On a desktop it hides the options, so many sites show the main items openly. Keep the most important action visible outside any hidden menu.
How do I test my website navigation?
Ask someone who has never seen the site to find three specific things while you watch without helping. Where they hesitate or go the wrong way shows what needs changing.
What are breadcrumbs, and do I need them?
A trail such as Home, Services, SEO that shows where a page sits. They help visitors on larger sites and give search engines a clear picture of how pages relate.
Does navigation affect SEO?
Yes. Clear navigation helps search engines discover pages and understand how they relate, and it helps visitors reach them. Descriptive link text and a logical structure both help.
Keep reading.
More guides on the same topic, and on the ones around it.
- Seven Website Design Myths That Cost Businesses EnquiriesSeven website design myths that cost businesses enquiries, from 'make the logo bigger' to 'people don't scroll', with what to do instead.UI/UX Design
- Website Accessibility Basics: A Guide for Business OwnersWebsite accessibility basics for business owners: what it means, who it helps, the checks anyone can make on a page and when to bring in an expert.UI/UX Design
- Website Redesign Checklist: Before, During and AfterA website redesign checklist: the signs you need one, what to record first, how to protect search visibility and what to test on launch day.Website Design & Development
Keep going.
The services behind this guide, if you would rather have it done.
Know what you need? Let's scope it.
Tell us about the business and the work. You get a reply within 24 hours.
