What makes good website navigation? Effective website navigation helps users find what they need quickly and confidently. It requires a clear information hierarchy, descriptive and familiar labels, consistent placement, mobile-responsive design, accessible implementation, and support features like breadcrumbs and site search for content-heavy sites. Good navigation reduces bounce rates and increases the likelihood of users taking meaningful action.

---

What are the steps in website navigation? The steps to design effective website navigation are: 

(1) define your content hierarchy, 

(2) build a sitemap, 

(3) choose the right navigation pattern, 

(4) write clear, familiar labels, 

(5) implement responsive mobile navigation, 

(6) add supporting elements (breadcrumbs, site search, footer nav), and 

(7) test with real users.

---

There is a specific kind of frustration that comes from landing on a website, knowing the organisation offers what you need, and still leaving without finding it. The product or service was right. The intent was there. The navigation failed.

This happens more than most organisations realise. Research by Clutch found that 49% of consumers leave websites with confusing navigation — roughly half of all visitors, gone before the content has a chance to do its job.

The root cause is usually the same. Navigation is treated as a layout decision rather than a user experience decision. The menu gets designed after the visual concept is approved, organised around how the organisation sees itself rather than how users are trying to get somewhere, and then left untested.

Navigation is often the first interaction a visitor has with a digital presence. When it fails, everything downstream fails with it  enquiries not submitted, services not found, conversions not made.

This guide walks through the practical steps for designing navigation that works: from getting the structure right before any design tool is opened, through to accessibility requirements that many organisations still overlook.

Why website navigation matters more than most people think

Navigation is the primary tool users use to find what they need on a website. If users can’t navigate confidently, they leave regardless of how good your content, product or service is. Effective navigation reduces bounce rates, increases page depth, and creates the conditions for conversions.

The conversion point is worth making explicit. A user who cannot find the enquiry form does not submit an enquiry. A user who cannot locate the services page does not evaluate what you offer. Navigation failures are not just a UX problem; they are a pipeline problem.

The accessibility dimension compounds this. For users relying on keyboard navigation or screen readers, navigation that is not technically accessible is not inconvenient it does not work at all. A 2025 accessibility market analysis found that 71% of users with disabilities leave inaccessible sites immediately, and 86% do not return after a negative accessibility experience. For the Australian government, healthcare, and education organisations, this is also a legal exposure and not just a design preference.

Step 1: Define your content hierarchy before you design anything

Navigation reflects content structure. You cannot design a menu before you know what needs to be in it  and once design begins, the temptation to fit content into the visual structure, rather than the other way around, becomes almost irresistible.

The conflict that emerges in almost every navigation project is between what the organisation wants in the menu and what users actually need. Internal teams default to the organisation’s own mental model  departments, service lines, internal project names. Users arrive with a task in mind and look for the most direct path to completing it. These two models rarely align naturally.

Card sorting is a practical technique for resolving this. Users are given cards representing the site’s main content areas and asked to group them in ways that feel logical. The results reveal how users not the organisation  mentally categorise the content. This is the input that should drive the navigation structure.

The output of this stage is a clear content hierarchy: primary categories, secondary groupings, and the decision about what belongs in the navigation versus what belongs in the footer or a secondary page. No design tools are opened until this is agreed.

Step 2: Build a Sitemap

A sitemap is a structural diagram or document that maps every page of the site and shows how they relate to each other. Its purpose is to make the hierarchy visible before anyone starts designing, and to give all stakeholders a shared view of what the site contains.

The practical rule that prevents most deep-navigation problems is this: if a user needs more than three clicks to reach important content from the homepage, the structure needs rethinking. Content buried at three or four levels deep is content most users will never find through navigation.

The format matters less than the engagement. A sitemap, as a spreadsheet, works as well as a diagram, provided the people who need to review and approve it will actually do so. The sitemap is the point where stakeholders can request additions or changes at low cost before any design or development work, depending on the structure.

Step 3: Choose the Right Navigation Pattern

The right navigation pattern depends on the volume and complexity of the site’s content. Using a mega menu on a five-page site is overkill. Using a simple dropdown on a government portal with hundreds of pages is inadequate. Match the pattern to the content.

Primary navigation (global nav bar)

The standard: a horizontal bar at the top of every page. Consistency matters here more than creativity. Navigation that appears in a different position or with a different structure on different pages disorients users. The primary nav should be identical across all pages, visually distinct from page content, and predictably located.

The logo-as-home-link convention is worth preserving. Users expect to click the logo to return to the homepage breaking this convention creates a small but consistent friction point for many visitors.

Dropdown menus

Dropdowns are appropriate when second-level content is meaningful, but the primary nav needs to remain clean. The key consideration is trigger behaviour: hover-triggered dropdowns are inaccessible to touch users and keyboard users. Nielsen Norman Group’s 2024 menu design guidance specifically flags hover-only menus as a pattern to avoid because touch and keyboard users cannot reliably activate hover-triggered content. Click-triggered dropdowns that also work via keyboard are the accessible choice.

Depth of nesting is the second consideration. Two levels, primary and secondary, are manageable. Three levels (primary, secondary, tertiary) create a navigation structure that is difficult to use on any device. If the content genuinely requires three levels, the information architecture problem is upstream of the navigation design.

Mega menus

Mega menus display a large number of options in a structured panel, often with visual hierarchy, icons, and grouped categories. They are appropriate for large retail sites, government portals with extensive service catalogues, or complex organisations with genuinely large volumes of content.

For most organisational websites, professional services, not-for-profit, education institutions  a mega menu is not the right tool. It signals content volume the site may not have, and creates visual complexity that overwhelms rather than guides.

Hamburger menus (mobile)

The hamburger icon with three horizontal lines  is now widely recognised and safe to use as a mobile navigation toggle. Users understand what it means. The considerations that matter are not the icon itself but what sits behind it.

Progressive disclosure applies: the most important navigation items should appear first when the menu opens. Priority content should not require the user to scroll through a long list to find it. And items that drive conversion contact, enquiry, and services  should never be buried.

Footer navigation

Footer navigation is underused on most organisational websites. It is where engaged users go when the primary navigation has not answered their question users who have scrolled to the bottom, read the content, and are still looking for an answer. This is a high-intent audience.

Footer nav should be curated, not comprehensive. Secondary links, legal pages, contact details, and site map links belong here. It should not be a dumping ground for everything that did not fit in the primary nav, but it should actively capture visitors that the primary nav missed.

Step 4: Write labels that users understand, not labels that sound creative

Navigation labels should match the language users use not the organisation’s internal language. This is where many navigation projects fail at the last step.

A real example: if an organisation names a section “Marketplace” because that is how it describes its service model internally, users who are looking for “Products” or “Services” or “Shop” will not immediately understand where to click. The label requires interpretation. Every fraction of a second a user spends interpreting a label is a friction point and friction points have compounding consequences in navigation where the user is trying to orient quickly.

Common labelling mistakes:

• Internal jargon is used as labels. “Our Approach” instead of “How We Work.” “Solutions” instead of “Services.” “Insights” instead of “Articles” or “Blog.”
• Overly creative or abstract labels. Labels that sound distinctive but require a click to understand what the section contains.
• Inconsistent formats. Mixing verb-led labels (“Contact Us”) with noun-led labels (“Services,” “About”) creates a subtle inconsistency that reduces coherence.

The test: if a label requires more than a second to interpret, it is costing visitors. Familiarity beats originality in navigation.

Testing navigation labels

A/B testing primary navigation labels is worth doing on high-traffic sites where even small improvements in click-through to key pages have measurable value. The tool is simple two variants, traffic split, and click data and the results are often surprising.

For smaller sites or earlier in a project, qualitative testing is faster. A five-second test shows participants the navigation for five seconds and asks what they think is available. Task-based testing asks users to find specific things and observes where they go first, where they hesitate, and where they give up.

Step 5: Design for Mobile Navigation First

Mobile accounts for the majority of web browsing. Australian data indicates that approximately 55–60% of browsing and search activity occurs on mobile devices. Navigation designed primarily for desktop and then adapted for mobile will always be a compromise. The starting point should be mobile.

Beyond the hamburger menu, mobile navigation involves considerations that desktop navigation does not:

• Touch target size. Interactive elements need to be large enough for reliable tapping. WCAG 2.5.5 recommends a minimum touch target of 44 by 44 CSS pixels smaller targets create disproportionate frustration for users with motor impairments and cause accidental taps for everyone.
• Tap spacing. Navigation items placed too close together cause accidental activations. Adequate vertical spacing between items is a usability requirement, not a design preference.
• Thumb zone. The lower two-thirds of a mobile screen is the most comfortably reachable area. Primary navigation triggers and the most important menu items should sit within this zone where possible.
• Sticky navigation. A navigation bar that remains visible as the user scrolls can improve access on long pages but on mobile, a sticky nav that consumes 15–20% of the screen height is a net negative for the reading experience. Use it selectively, and test it.

The only way to validate mobile navigation is to test on real devices. Browser simulators do not replicate the actual touch behaviour, screen density, or rendering of physical phones. Test on the devices your audience actually uses.

Step 6: Add Supporting Navigation Elements

Primary navigation is not sufficient for content-heavy sites. Three supporting elements address the gaps that menus alone cannot fill.

Breadcrumbs

Breadcrumbs are a secondary navigation trail that shows where the current page sits within the site hierarchy typically displayed near the top of the page content area. They answer the question “where am I?” for users who arrived via a search engine result and landed on a deep interior page, bypassing the homepage and primary nav entirely.

When to use breadcrumbs: any site with content more than two levels deep, e-commerce sites, documentation or resource libraries, and multi-level service or programme pages. For simple five-to-ten page sites, breadcrumbs are unnecessary the navigation structure is flat enough that orientation is never an issue.

The SEO value is a secondary benefit worth capturing. Breadcrumbs implemented with BreadcrumbList structured data markup help search engines understand site hierarchy and can produce the visual breadcrumb display in Google search results, increasing the informational richness of search listings.

Site search

Site search becomes necessary when a site has more than approximately fifty pages, or when the content is varied enough that browsing the menu is not a practical way to find a specific item. Government portals, educational institutions, not-for-profit resource libraries, and healthcare information sites all fall into this category.

Conventional placement: top right of the global navigation bar. Users know to look there.

The quality point is worth stating plainly: poor site search is worse than no site search. A search that returns irrelevant results, cannot handle natural language queries, or produces zero-results pages without guidance creates a dead end that is more frustrating than having no search at all. If site search is worth including, it is worth configuring and testing properly.

The analytics value is often overlooked. Search queries on your site reveal exactly what users expected to find and could not locate through navigation. This is direct, unsolicited intelligence about navigation gaps and it should be reviewed regularly.

Anchor navigation and “back to top”

For long-form content pages detailed service pages, guides, blog posts anchor links within the page allow users to jump directly to relevant sections. A “back to top” element at the bottom reduces the effort of returning to the navigation after reading deeply. On mobile, where scrolling is the primary within-page navigation mode, these elements meaningfully improve usability on content-dense pages.

Step 7: Make Navigation Accessible

Accessible navigation is missing from most navigation guides and from most websites. For Australian government, healthcare, and education organisations, WCAG 2.2 Level AA is the expected minimum under the Disability Discrimination Act, and the National Transition Strategy treats this as the baseline for government services and many publicly funded providers.

WCAG 2.2’s Guideline 2.4, “Navigable,” includes success criteria that specifically address navigation: multiple ways to find content (2.4.5), visible focus indicators (2.4.7), and logical focus order all of which must be implemented in the navigation structure, not just the page content.

What accessible navigation requires technically:

• Keyboard navigability. WCAG Success Criterion 2.1.1 requires all website functionality to be operable via keyboard  including opening dropdowns, activating menu items, and closing mobile menus. This is a foundational requirement for users who are blind, have low vision, or have motor impairments that make mouse use impractical.
• Visible focus indicators. When a keyboard user tabs through navigation items, a clear visual indicator must show which element is currently focused. Many designs suppress the browser’s default focus ring for aesthetic reasons, breaking keyboard usability entirely.
• ARIA labels and roles. Screen reader users rely on semantic markup to understand navigation structure. Navigation landmarks (<nav>), expanded/collapsed states for dropdowns (aria-expanded), and descriptive labels distinguish multiple navigation regions on a page. These are not optional accessibility improvements, they are the markup that makes navigation functional for screen reader users.
• Skip navigation links. A “skip to main content” link at the top of the page allows keyboard users to bypass the navigation menu on every page. Without it, a user navigating a ten-item menu must tab through all ten items on every page they visit before reaching the content they came for.

What accessible navigation requires in design:

• Sufficient colour contrast between navigation text and its background, meeting WCAG AA minimums.
• Touch targets large enough for users with motor impairments, not just average users.
• No reliance on hover-only interactions hover is not accessible on touch devices and is not available to keyboard users.

Read more about accessible design here.

Navigation Best Practices Checklist

Information Architecture

• Content hierarchy is defined before navigation design begins
• Sitemap agreed by key stakeholders
• No important content is more than 3 clicks from the homepage

Structure and Pattern

• Navigation pattern chosen to match content volume
• Primary nav consistent in position and structure across all pages
• Footer navigation curated for secondary and legal links

Labels

• All labels use user language, not internal jargon
• Labels are specific enough to set clear expectations before clicking
• Label format is consistent across nav items

Mobile

• Mobile navigation tested on real devices (not just browser simulators)
• Touch targets meet minimum size requirements (44×44 CSS pixels)
• Hamburger menu reveals priority links first

Accessibility

• All nav items are reachable and activatable by keyboard
• Visible focus indicators on all interactive elements
• ARIA roles and labels implemented for dropdowns and toggles
• Skip navigation link present
• Colour contrast meets WCAG AA minimum

Supporting Elements

• Breadcrumbs implemented for sites with a deep content hierarchy
• Site search is present for sites with 50+ pages or varied content
• Anchor navigation is present on long-form content pages

Testing

• Navigation tested with real users (task-based testing)
• Key navigation labels reviewed via A/B or qualitative testing
• Analytics reviewed: Are users finding key pages? What are they searching for?

Want to know how well your current navigation is performing? Butterfly’s UX audit assesses navigation structure, label clarity, mobile usability, and accessibility and tells you exactly what to fix. Request a UX audit →

Common website navigation mistakes to avoid

1. Too many top-level items. Navigation research supports limiting primary nav to around five to seven items. Beyond that, cognitive load increases, and users struggle to scan and make decisions. If more items are genuinely necessary, group them into dropdowns do not list them all at the primary level.

2. Burying conversion-critical pages. Enquiry forms, contact pages, pricing, and booking pages should never be hidden in sub-menus. If the business goal is conversion, the path to conversion needs to be visible at the top level or persistently accessible via a call-to-action button in the nav.

3. Navigation is organised around internal structure, not user tasks. The most common navigation failure: menus reflect how the organisation is divided departments, product lines, internal frameworks rather than how users think about their needs. The result is navigation that requires users to understand the organisation before they can find what they came for.

4. Hover-only dropdowns. Hover-triggered navigation is inaccessible on mobile and for keyboard users. It also fails for users with motor impairments who cannot hold a cursor steady over a small trigger. Click-triggered dropdowns that are also keyboard-operable are the correct pattern.

5. Inconsistent navigation across pages. Navigation that changes position, changes items, or behaves differently on different pages creates disorientation. Users develop a mental model of how the site works from the first few pages; inconsistency breaks that model and costs confidence.

6. A neglected footer. The footer is where engaged users go when the primary nav has not answered their question. An underdeveloped footer fails visitors who have invested the most in finding what they need, often the highest-intent audience on the site.

How Butterfly Approaches Navigation Design

Navigation design at Butterfly is embedded in the information architecture and UX process, rather than treated as a post-design decision. Discovery-phase user research, including card sorting and task analysis, informs navigation hierarchy before a single wireframe is produced. Our work with government, healthcare, and education organisations means accessible navigation is built in from the outset: keyboard operability, ARIA implementation, and WCAG 2.2 compliance are part of the design specification, not retrofitted at the end. 

If you are starting a new website build or suspect your current navigation is costing you visitors, our human-centred design process is a useful starting point.

Frequently Asked Questions

Navigation Is a UX Decision, Not a Layout Decision

The organisations that get navigation right are those that treat it as a user experience problem to be solved with research and testing not a visual design problem to be resolved after the page layouts are approved.

The steps in this guide are sequential for a reason. Getting the hierarchy right before choosing the pattern and getting the pattern right before writing labels produces navigation built on what users actually need. Testing it on real users, on real devices, including users who rely on assistive technology, is what converts intention into evidence.

Good navigation does not announce itself. Users do not notice it when it works. They only notice it when it does not, and then they leave.

Navigation that works for every user, including those who rely on assistive technology. Talk to Butterfly about accessible, human-centred navigation design for your organisation. Get in touch →