Navigation is how a visitor gets from the page they landed on to the page they need. This guide covers menu structure, labels, dropdowns and testing.
Website navigation is the set of menus, links and signposts that lets visitors move between pages and find what they came for. Plan it around the tasks visitors want to finish, keep the main menu short, use plain labels and show the same menu on every page. Then test it by asking someone new to the site to find several things without help.
What is website navigation?
Website navigation is the set of menus, links and signposts that lets a visitor move from the page they landed on to the page they need. Good navigation answers three questions on every page: where am I, what else is here, and what should I do next. When it fails, visitors rarely complain. They leave.
Navigation is more than the menu at the top. The table lists the parts most sites use.
| Part | What it does | What belongs in it |
|---|---|---|
| Main menu | Gives the routes to the most important pages | The few pages most visitors need, such as services or products, about and contact |
| Footer | Holds the routes people look for at the bottom of a page | Contact details, policy pages and secondary pages |
| Breadcrumbs | Show where the current page sits | A trail from the home page down to the current page, on sites with several levels |
| Search | Lets visitors type what they want | A search box, useful on sites with many pages or products |
| Utility links | Serve one specific task | Login, cart, a phone number or an enquiry button |
| Links inside the page | Carry visitors to related pages | Links in the text, related guides and next-step buttons |
The main menu gets the most attention, but links inside the text often do more work, because they appear when a visitor is already interested. The internal linking guide covers those.
Plan the page list before the menu
Decide what the site contains before you decide what the menu says. A menu is a view of the structure, so if the structure is muddled, a better label will not rescue it. UX designers call this work information architecture, and the guide to web design, UI design and UX design shows where it sits in a project.
- List every page the site has or needs. If you are starting from nothing, the startup website guide suggests which pages come first.
- Group the pages by what a visitor wants to do, not by how your business is organised. Customers think "I need a repair", not "Service Division B".
- Give each group a name a customer would use, and check that every page belongs to one group only.
- Build the top level from those groups, putting first the ones that bring enquiries or sales.
- Check that no important page is more than a few clicks from the home page, and that every page links on to something useful.
You can do this with sticky notes, one per page, moved around until the groups make sense. Ask two or three people from outside the business to sort the notes without your help. Where they put a page is a clue to where visitors will look for it.
How many items should a menu have?
There is no correct number, and no search engine rule sets one. The limit is how much a visitor can take in at a glance. For most small business sites that means a handful of top-level items. A menu that fills the screen makes people read every label before they can choose.
When a menu grows too long, try these changes in order.
- Merge items that answer the same need, such as "About", "Our story" and "Team".
- Move low-priority pages, such as policies and careers, to the footer.
- Group related pages under one parent item with a second level.
- Remove pages that few people visit and that support no goal.
An online store with many categories needs a different pattern: a categories menu or a mega menu, plus a search box. On any site, ask of each item if you can say in one sentence what it is for. If you cannot, it may not belong. Put the most wanted items first and the main action, such as Contact or Get a quote, last, styled as a button so that it stands out.
How should I name menu items?
Use the words your customers use. Plain, familiar labels are found faster than clever ones, and a label that matches the heading of the page it opens tells the visitor they have arrived in the right place. Menu labels also act as link text, so a descriptive label helps people and search engines understand where a link goes.
- Find the real words in customer emails, call notes, your site's search box and the queries shown in Google Search Console.
- Name destinations with nouns, such as "Services" or "Contact", and actions with verbs, such as "Book a visit".
- Keep labels short and use the same style of capitalisation throughout.
- Make each label distinct. "Services" and "Solutions" in one menu cannot both be right.
- Avoid internal jargon and invented names that mean nothing to a stranger.
- Label a menu icon "Menu". A bare symbol is not clear to everyone.
| Unclear label | Clearer label | Why |
|---|---|---|
| Our Offerings | Services | It is the word customers search with |
| Solutions | Bookkeeping and tax filing | It names the actual service |
| Resources | Guides | It says what the section holds |
| Let's Connect | Contact | It is the usual word and needs no thought |
| Collections | Shop | It tells the visitor they can buy here |
Should I use a dropdown menu?
Use one when a section has several pages that belong together, such as the individual services under "Services" or the categories in a shop. Do not use one to hide a long list you could not decide how to cut.
Dropdowns cause trouble in specific ways. A menu that opens only on hover does not work on a phone or tablet, where there is no hover. Small gaps between items make the menu close as the pointer moves. Keyboard and screen reader users can be shut out if the menu is not built properly. Menus nested three levels deep are hard to use with a mouse and harder with a thumb.
A few habits avoid most of the problems.
- Keep to one dropdown level.
- Make the parent label a real link to a page that lists its children, so the section still works if the dropdown does not.
- Open dropdowns on tap or click as well as on hover, and make sure they can be opened and closed from the keyboard.
- Do not hide your main action inside a dropdown.
Search visibility is one more reason for care. Google's documentation says it can generally follow links that are standard HTML links with an href attribute, and that it cannot reliably extract addresses from other elements that act as links through script events. If your menu is built with scripts, check that its links are real links in the page's HTML. The URL Inspection tool in Google Search Console can show you the page as Google fetched it.
Navigation on a phone
On a phone the main menu usually collapses behind a button. That is fine, but the button must be clear and large enough to tap, and the most important action should not be hidden inside it. A call button or an enquiry link that stays on screen often earns more than a tidy menu.
- Label the button "Menu", or pair the icon with the word.
- Make every tap target large and well spaced. WCAG 2.2 sets a minimum target size of 24 by 24 CSS pixels at level AA, with some exceptions. Larger is easier on a thumb.
- Close the menu after a choice, and make sure the browser's back button returns to the previous page.
- Check that a fixed header does not cover the content beneath it.
- Test the menu on a real phone, held in one hand, in daylight.
The guide to a mobile friendly website covers the rest of the phone experience.
Breadcrumbs, footers and search
Breadcrumbs show the visitor's path, such as Home, Services, Website design. They suit sites with several levels, such as stores and large guides, and add little to a five-page site. Google supports breadcrumb structured data and recommends breadcrumbs that show a typical path to the page. Check Google's current documentation before adding the markup.
A footer is the place for contact details, policies and secondary links. It is not a dumping ground for every page. A long list of links in the footer is hard to read and hides the pages that matter.
A search box helps when there are many pages or products. Check what it does when nothing matches, because a blank result is a dead end. Offer a spelling hint, popular pages or a contact route instead. WCAG also asks, at level AA, that there is more than one way to find a page within a set of pages, such as a menu together with a search box or a site map page. Steps in a process are an exception.
Make navigation consistent and accessible
The W3C's Web Content Accessibility Guidelines contain several rules that make a menu easier for everyone.
- Keep repeated navigation in the same place and order on every page. WCAG 3.2.3, consistent navigation, asks for this at level AA.
- Offer a way to skip the repeated menu and reach the main content. WCAG 2.4.1, bypass blocks, requires a mechanism for this at level A, and a skip link at the top of the page is the usual one.
- Show clearly which element has keyboard focus, and make sure every menu item can be reached with the Tab key.
- Mark the menu as navigation in the page's code, so that screen readers can jump straight to it.
Which version and level of WCAG a law or contract asks for differs, so check the document that applies to you. The website accessibility checklist covers the wider checks.
How do I test my navigation?
Test with people who have never used the site. A menu that is obvious to you, after months of working on it, tells you nothing.
- Write a short list of tasks drawn from real customer questions, such as "find the price of a product", "find the return policy" or "book a visit".
- Ask a few people outside the business to do each task on their own phone or computer. Do not help them.
- Watch where they look and click first, where they hesitate and where they go back. Ask afterwards where they expected to find the item.
- Repeat with a text-only list of your menu items, asking where they would click for each task. This shows whether the labels work without the design.
- After launch, check analytics and Search Console. Look at which menu links are used, what visitors type into your site search and which pages they leave from.
- Tab through a page with the keyboard and confirm that every menu item can be reached and opened.
- Look for dead ends. Every page should lead on to something, and broken links should be fixed.
Fix the problems that stop people finishing a task first. Then test again, because changing one label can make another unclear.
Keeping navigation tidy as the site grows
Menus swell because every new page seems important to someone. Set a rule: a new page goes into the main menu only if it serves a main task. Otherwise link to it from the pages where it is relevant and from its section page. Review the menu once a year using the same tasks you used in testing, and remove items that no longer earn their place.
Developers usually set up menus, mobile behaviour and links as part of a build. The website development service page describes the websites Liftup builds.
Questions and answers
What is website navigation?
Website navigation is the set of menus, links, breadcrumbs and search that lets visitors move around a site and find what they need. The main menu is the most visible part, but footer links and links inside the text matter too. Good navigation answers where you are, what else is here and what to do next.
How many items should a menu have?
There is no fixed number and no search engine rule. For most small business sites a handful of top-level items is enough. If the menu is too long to take in at a glance, merge similar items, move policies to the footer or group pages under one parent.
How should I name menu items?
Use the plain words your customers use, taken from their emails, calls and search queries. Match each label to the heading of the page it opens. Avoid invented names and jargon, and make every label different from the others.
Should I use a dropdown menu?
Use one when several pages clearly belong together, and keep to one level. Make the parent a real link, support tap and keyboard use as well as hover, and keep the main action out of it. Hover does not exist on phones, so test on a real device.
How do I test my navigation?
Give a few people who have never seen the site a list of real tasks, and watch without helping. Note where they click first and where they get stuck. Also try the keyboard and a text-only list of the menu, and check analytics and Search Console after launch.
Does navigation affect SEO?
Navigation helps Google discover pages and helps visitors reach them. Google can generally follow only standard HTML links with an href attribute, so a menu built purely with scripts can hide pages from it. Treat navigation as a way to help people and crawlers find pages, not as a ranking trick.
Should the logo link to the home page?
Yes. Visitors expect the logo to take them back to the home page, and most sites follow that convention. Some people do not realise the logo is a link, so on a small site a Home item in the menu does no harm.