Web Development

How to Structure Website Navigation So Visitors Find Anything in Two Clicks

By Asad ·

Structure website navigation around visitor tasks: five to seven top-level items named in customer words, one dropdown level, a useful footer, breadcrumbs where depth creates doubt, and a mobile menu tested on a real phone — with an audit method and a worked trades example.

20 min readLast updated

Website navigation diagram showing a clear menu, dropdown and contact button

Good website navigation lets a visitor find anything important in two clicks from the homepage: one click on a clear top-level item, and one more click to the exact page they need. That is the direct answer, and it is a design goal rather than a law of nature — some large sites need a third click for deep content, but no visitor should ever feel lost, forced to guess, or made to use the search box because the menu failed them. If you structure your pages around what visitors actually come to do, keep the main menu to five to seven items, name those items in the visitor's own words, and support the menu with a useful footer, breadcrumbs, and a sensible mobile pattern, most people will reach prices, services, contact details, and booking pages without thinking about navigation at all. That invisibility is the point. Navigation is doing its job when nobody notices it.

Most small business websites do not fail because they lack pages. They fail because the pages they already have are hidden behind clever labels, crowded menus, or a structure that mirrors the company's internal departments instead of the customer's journey. A visitor does not care how your business is organised internally. They care about solving one problem: finding a plumber who covers their town, checking whether a clinic treats their condition, seeing what a service costs, or booking an appointment before they leave the page. When the menu speaks in internal jargon — "Solutions", "Capabilities", "Our Offering" — the visitor has to translate before they can act, and many will not bother. They will press back and try the next result instead. Clear navigation is therefore not a cosmetic polish applied at the end of a build. It is the map of your whole site, and it decides whether your content, your prices, and your contact form ever get seen.

Start with information architecture, not with the menu bar

Information architecture is simply the plan for how your content is grouped. Before you draw a menu, list every page you have or plan to have, then group those pages by the task they serve rather than by who wrote them. A trades business, for example, might group emergency repairs, planned installations, servicing, prices, service areas, reviews, and contact details. A clinic might group conditions treated, treatments, practitioners, prices, insurance and booking information, and patient guidance. In both cases the grouping follows the visitor's question — "Can you fix this? What will it cost? Are you near me? How do I book?" — not the business's org chart. Once you have groups, test them with a simple card sort: write each page name on a card, ask a friend or customer to sort the cards into piles that make sense to them, and notice where your grouping surprises them. You only need a handful of people for this to be useful, because the same confusions tend to appear again and again.

From those groups, choose a hierarchy with no more than three levels for most small business sites: the homepage, a set of section pages, and detail pages inside each section. A fourth level is sometimes unavoidable on a large catalogue or a site with many locations, but each extra level is a place where visitors can get lost, so it should earn its place. Every detail page should belong to exactly one section, so that breadcrumbs, menus, and internal links all tell the same story about where the page lives. If the same page appears under two different parents with different names, visitors and search engines alike receive conflicting signals. Keep one home for each page, and link to it from elsewhere rather than duplicating it. This discipline also makes future maintenance far easier: when a service changes, you update one page, not three near-identical copies scattered across the menu.

The five-to-seven rule for the main menu

Keep the main menu to five to seven top-level items. Fewer than five can work for a very focused business, but more than seven starts to hurt. Human short-term memory is limited, and a long menu forces visitors to scan, compare, and choose among too many options at once. The result is slower decisions, more misclicks, and a menu that looks crowded on a laptop and unusable on a phone. If you currently have ten or twelve top-level items, the fix is rarely to shrink the text or squeeze the menu. It is to merge, demote, or remove. Merge pages that answer the same question. Demote supporting pages — careers, privacy, terms, detailed guides — to the footer, where visitors expect to find them without them competing for attention. Remove pages that exist only because someone once asked for them and nobody has visited since. A menu is a shortlist of the most important destinations, not a table of contents for everything you own.

Choosing which items earn a top-level place is a business decision, not a design preference. Look at what visitors actually try to do: the pages they visit most, the questions they ask by phone or email, and the actions that lead to enquiries. For most service businesses the winners are predictable: Services, Prices, About, Reviews, Service Areas or Locations, and Contact. A shop will need Shop or Products and perhaps Delivery and Returns. A clinic will need Treatments and Booking. The exact labels will vary, but the principle holds: the menu should lead with the destinations that convert visitors into customers, and it should not lead with the destinations that flatter the business, such as a lengthy history page or an awards page, however proud you are of them. Those pages still matter, and they belong one click deeper or in the footer, where interested visitors can find them without them blocking everyone else.

Illustrative example: clicks to reach a price pageBefore tidy-up5 clicksAfter tidy-up2 clicksMobile menu3 clicksIllustrative only, not measured data. Counts describe one worked example.

The chart above is an illustrative example, not research data. It shows the kind of improvement a tidy-up can produce when a price page moves from deep inside a dropdown into the main menu. Your own before-and-after counts will differ, and you should measure them with the audit method later in this guide rather than borrowing anyone else's numbers.

Name labels in the visitor's words

Labels are promises. "Services" promises a list of what you do. "Get a Quote" promises a way to ask for a price. "Our Solutions" promises nothing in particular, which is why it performs poorly as a label. The best test for a label is brutally simple: can a stranger who has never met your business guess what they will find behind it, without hovering, clicking, or reading a tooltip? If not, rename it. Use the words your customers use when they phone you. Plumbers hear "boiler repair", "blocked drain", and "bathroom fitting", not "hydronic solutions". Dentists hear "toothache", "braces", and "teeth whitening", not "oral rehabilitation pathways". Your menu should sound like your customers, because it is written for them, not for your industry peers.

Be specific where specificity helps, and general where it does not. A menu item called "Services" is fine when it leads to a clear overview page that then lists each service with a plain description. A menu item called "What We Do" is vaguer and adds nothing. Avoid abbreviations, internal product names, and playful labels that only make sense after an explanation. Playfulness has a place in headlines and photography, but the menu is a tool, and tools should be legible first. The same rule applies to action labels: "Contact" is clear, "Get in Touch" is acceptable, and "Let's Talk" is weaker because it hides whether the next page is a form, a phone number, or a booking calendar. When in doubt, choose the boring label that cannot be misunderstood. Boring is a compliment for navigation.

Dropdown discipline: fewer, flatter, and never a maze

Dropdowns are useful when they reveal a short, scannable list of sub-pages. They become a problem when they stack three levels deep, open on hover with no tolerance for a shaky mouse, or hide the most important page at the bottom of a long list. Keep each dropdown to a single level and a modest number of items — ideally no more than eight, and fewer if the labels are long. Order the items by importance or by the order a visitor thinks through the task, not alphabetically by default, unless the list is a genuine directory such as locations. Put the overview page first, because some visitors will click the parent item expecting a summary, and make sure that parent item itself links to a real page rather than being a dead label that only opens the dropdown. A parent that goes nowhere frustrates visitors who click it and confuses anyone using a keyboard or a screen reader.

On touch devices there is no hover, so every dropdown must also work on tap, and it must close cleanly when the visitor taps elsewhere. Test this on a real phone, not only by resizing a desktop browser window, because tap targets, thumb reach, and the way a menu overlaps page content all behave differently on a device. If a dropdown is so long that it scrolls off the screen on a phone, it is too long, full stop. Split it into two sections, move some items to a landing page, or reconsider whether those pages need to be in the menu at all. A landing page that lists a section's pages with a sentence about each one is often a better experience than a giant dropdown, because it gives visitors context before they choose, and it gives search engines a useful page to index.

The footer is not a dumping ground. It is the second most used navigation area on many sites, because visitors scroll there when the main menu has not answered their question, when they want contact details, or when they are looking for the small print. A good footer repeats the main sections, adds the supporting pages that do not belong in the header — privacy, terms, accessibility, careers, press — and puts contact details, opening hours, and service areas where they can be found without a hunt. It should also include a short sentence about what the business does and where it operates, because some visitors land directly on a deep page and only ever see its footer. Think of the footer as a safety net: if the header failed, the footer gets a second chance to send the visitor to the right place.

Keep the footer organised in columns with clear headings, and keep the number of links manageable. A footer with eighty links looks comprehensive and behaves like a wall of text: nobody reads it, and the links that matter drown among the ones that do not. Group footer links by purpose — Services, Company, Help, Legal — and limit each column to the links a visitor in that frame of mind would plausibly need. Make sure the footer appears on every page, including landing pages and checkout pages, unless there is a deliberate reason to remove it, and check that footer links are real links with readable contrast, not grey text on a slightly darker grey background. Accessibility is not an extra here: if a link cannot be seen or tapped, it is not navigation, it is decoration.

Breadcrumbs: small text, large reassurance

Breadcrumbs are the small trail near the top of a page that shows where the page sits in the hierarchy, such as Home > Services > Boiler Repair. They cost almost no space and they solve three problems at once. First, they orient visitors who arrived from a search engine directly onto a deep page: one glance tells them what section they are in and what else that section contains. Second, they offer a one-click escape route back to the section overview or the homepage without using the browser back button repeatedly. Third, they reinforce the site's structure for search engines, which can display them in results. Breadcrumbs matter most on sites with three levels or with many similar detail pages, such as a clinic with many treatments or a shop with many categories, where a visitor can easily lose track of which section they are browsing.

Keep breadcrumbs honest and consistent. They should reflect the single hierarchy you chose for the site, not the path the visitor happened to take through internal links, and they should not include the current page as a link to itself. On mobile, breadcrumbs can be shortened to just the parent page — a "Back to Services" link — rather than squeezed onto one line until they wrap awkwardly. If your site has only two levels, breadcrumbs are optional, and a clean section page with clear next steps may serve visitors better. Do not add breadcrumbs as decoration on a flat site where every page is already one click from the homepage; add them where depth creates genuine doubt about location.

Mobile menu patterns that actually work

Most visitors now arrive on a phone, so the mobile menu deserves as much design attention as the desktop menu, not a shrunken afterthought. The common patterns each have trade-offs. A hamburger menu keeps the screen clean but hides the options, so it suits sites where visitors usually arrive with a specific task and a search habit. A bottom tab bar keeps three to five key actions always visible — Home, Services, Prices, Contact, for example — and suits businesses where calling or booking is the dominant action. A full-screen menu gives room for longer lists and a search box, and suits larger sites, provided the close button is obvious and the menu does not trap the visitor. Whichever pattern you choose, the rules from desktop still apply: short labels, one clear action per screen, tap targets at least as large as a fingertip, and a visible way back to the page the visitor came from.

Two mobile mistakes appear constantly. The first is a menu that opens over the page but cannot be closed without scrolling to the bottom, because the close button scrolled away. Pin the close control to the top of the menu panel. The second is a menu that lists everything but buries the phone number and the booking button, which are often the whole reason a mobile visitor came. Put a call button and a primary action in the mobile header itself, outside the hamburger, so they survive even when the menu is closed. Test the mobile menu with one hand, on a real device, while standing up, because that is how many visitors will use it. If you cannot reach the contact button with your thumb, neither can they.

Quick test: Hand your phone to someone who has never seen your site and ask them to find your prices. Watch, do not help. If they hesitate, tap the wrong item, or give up, your navigation — not your visitor — needs fixing.

Audit your navigation in an afternoon

You do not need analytics software or a consultant to audit navigation. You need a list of your pages, a timer, and five minutes per task. Start by writing down the five tasks visitors most often try to complete: find a price, find a service, check an area covered, read reviews, and contact or book. Then, for each task, count the clicks from the homepage, note every moment of hesitation or wrong turn, and record whether the page found actually answers the question. Repeat the same tasks on a phone. The results are usually stark: one or two tasks take four or five clicks, one label misleads everyone, and one important page is reachable only from a blog post. Those findings are your redesign brief, and they are far more reliable than opinions about which menu "looks nice".

TaskClicks todayWhere visitors get stuckFix to try first
Find a priceCount itPrice hidden inside a dropdownMove Prices to the main menu
Find a serviceCount itVague label such as "Solutions"Rename it in customer words
Check an area coveredCount itAreas page only in the footerAdd areas to the Services overview
Read reviewsCount itReviews buried on the About pageGive Reviews its own menu item or section
Contact or bookCount itForm behind two more clicksPut Contact in the header on every page

After the audit, make one change at a time where you can, and retest the same tasks. Navigation changes interact: renaming a label, moving a page, and shortening a dropdown all at once makes it hard to know which change helped. If you run a business site rather than a large store, you can often complete the whole cycle — audit, rename, reorder, retest — in a single afternoon, because the site is small enough for the owner to know every page. Larger sites should prioritise the tasks that lead to enquiries and sales first, then work through the rest section by section. Keep a one-page record of what you changed and why, so that the next person who edits the site does not quietly undo the tidy-up by adding three more menu items "just for now".

Common mistakes, and what to do instead

MistakeWhy it hurtsBetter approach
Twelve-item main menuVisitors scan past the important itemsKeep five to seven items; demote the rest to the footer
Clever labelsVisitors cannot guess the destinationUse customer words, tested on strangers
Three-level dropdownsHover traps and phone failuresOne dropdown level, plus a section landing page
Dead parent itemsClicks go nowhere; keyboard users are strandedEvery parent links to a real overview page
No footer planDeep-page visitors have no second routeOrganised footer columns on every page
Menu mirrors departmentsVisitors must learn your org chartGroup by visitor task, not internal teams
Search as a substituteSearch hides a broken structureFix the structure; keep search as a bonus

One mistake deserves special attention: treating search as a substitute for navigation. A search box is a useful safety net, especially on a large site, and it should be easy to find. But if most visitors need search to find prices or contact details, the structure has failed, because search only helps visitors who already know what to ask for. Many visitors do not know your terminology, so they cannot search for it. Navigation, by contrast, shows them the options and teaches them your vocabulary as they browse. Keep search, by all means, but measure how often it is used for basic destinations. High search use for prices or contact details is a symptom, not a success metric, and the cure is a clearer menu, not a better search engine.

Worked example: a trades business in two clicks

Consider a fictional plumbing and heating business covering one city and its suburbs. Before the tidy-up, its menu read: Home, About Us, Our Solutions, Projects, Testimonials, Blog, Careers, Contact Us — eight items, with "Our Solutions" opening a dropdown of fourteen services in alphabetical order, prices hidden on a page linked only from inside a blog post, and service areas listed only in the footer. A visitor looking for an emergency plumber had to guess that "Our Solutions" contained plumbing, scroll a long dropdown, and then hunt for a phone number. A visitor looking for a boiler price had almost no route at all. The site had the content; the navigation hid it.

After the tidy-up, the menu reads: Services, Prices, Areas We Cover, Reviews, About, Contact — six items. Services leads to an overview page that groups the work into Emergency Repairs, Boilers and Heating, Bathrooms, and Servicing, each with a plain sentence and links to detail pages. Prices is its own top-level page with typical ranges, what affects the final figure, and a clear next step. Areas We Cover lists towns with a note on response times. Reviews is a short page of genuine customer feedback with a link to the external review profile. Contact sits in the header on every page, with a phone number on mobile. From the homepage, prices now take two clicks — Prices, then the relevant service — and emergency help takes one: the header phone button. Nothing was deleted that mattered; supporting pages moved to the footer, and the fourteen-service dropdown became four clear groups on a landing page that visitors can actually read.

The lesson of that example is not that six items are magic, or that every trades business should copy this exact menu. It is that structure follows tasks. If your visitors mostly book, booking must be unmissable. If they mostly compare prices, prices must be unmissable. If they mostly check whether you cover their town, areas must be unmissable. Audit first, then let the audit choose the menu. And revisit the menu whenever you add a major service, open a new location, or notice a new question arriving repeatedly by phone or email. Navigation is not a one-time build; it is a living map that should change as the business and its customers change.

Key takeaway: Five to seven top-level items, named in customer words, with one dropdown level, a useful footer, breadcrumbs where depth creates doubt, and a mobile pattern tested on a real phone will get most visitors to anything important in two clicks.

Frequently Asked Questions

Is two clicks a strict rule every page must meet?

No. Two clicks is a goal for the most important destinations — prices, key services, contact, and booking. Deep content such as individual guides or location pages may reasonably take three clicks, provided the route is clear, breadcrumbs show the location, and no step feels like a dead end.

How many items should a dropdown contain?

Aim for no more than eight, and fewer when labels are long. If a dropdown grows beyond that, split the section into groups on a landing page instead, so visitors can read a sentence about each option before choosing.

Should the homepage link be in the menu?

Most visitors expect the logo to link home, so a separate Home item is optional. Keep it if your audience is less confident online, or drop it to free a slot for a more important destination, provided the logo link is obvious and tested.

Do breadcrumbs help search rankings?

Breadcrumbs mainly help visitors orient themselves, and they can also appear in search results, which may make a result clearer. Treat visitor clarity as the reason to add them; any search benefit is a bonus, not the justification.

What belongs in the footer instead of the main menu?

Supporting pages that visitors seek occasionally rather than on every visit: privacy, terms, accessibility, careers, detailed guides, and sitemap-style listings. Contact details and key sections also belong in the footer as a safety net, even when they appear in the header.

How often should navigation be reviewed?

Review it whenever you add a major service or location, and otherwise at least once a year. Also review it when a new question starts arriving repeatedly by phone or email, because that question is telling you a destination is hard to find.

Need a navigation structure that sells? If your visitors cannot find prices, services, or contact details quickly, a clearer structure may be worth more than new pages. Talk to Asad Webs about restructuring your website navigation, or browse more practical guides on the Asad Webs blog, including our guide to briefing a web designer and our services page guide.

Category: Web Development

Tags: website navigation · information architecture · website structure · user experience · small business website

About Asad Webs

Asad Ali is a graphics designer with 20+ years of experience (working since 2003), based in Pakistan. He runs Asad Webs and writes its articles.

KEEP READING

Next guide

How to Test Your Website With Real Users Before Launch: A 90-Minute Usability Test →

Related articles

Join the conversation

No account needed. Comments appear only after approval. Your email address will not be published.

Be the first to share a useful question or thought.

You won’t be subscribed to any mailing list.
WELCOME BACK

Sign in

Access your orders, saved products and account.