Imagine a New York subway map. Routes snake through five boroughs, color-coded and numbered, with maps and signs that help riders know where they are and where they're going. The system works because architecture (the lines themselves) and interface (the visual cues) work together.
That's the job of website navigation design. Most websites think about navigation as a menu bar in the header, treating it as a single design decision. It's actually two systems working together: how the site is structured (information architecture) and how visitors find their way through it (the user experience layer). When either one breaks, visitors leave.
This guide covers both halves. The structural decisions that shape your site (global, hierarchical, and local navigation) and the design decisions that bring it to life (patterns, mobile, accessibility, and best practices). The goal is the same as the subway map: visitors should know where they are and where they're going, without thinking about it.
For more on B2B navigation specifically:
How do you define "navigation" on a website?
When most people picture website navigation, they jump to the obvious visual features: the website navigation menu in the header, a dropdown, maybe a hamburger icon on mobile. Taken more broadly, website navigation is everything that helps visitors understand a site and find what they need. The homepage of the New York Times' desktop site is a useful place to see all of it at once.
The NYT homepage features a ton of information: headlines and article summaries, breaking news, podcast episodes, the weather. Carefully designed, the homepage uses several navigation systems at once to give visitors access to every major corner of the site.
Like the best navigation design, the structure feels intuitive instead of overwhelming. Visitors can browse topics from a navigation bar, toggle between international editions of the paper, search by keyword, open expanded menus, and access account information. The bolded headlines tell readers that clicking will lead to full articles, and the masthead and article hierarchy orient people to where they are on the site. The breadth of options in the navigation bar communicates the paper's range of worldwide coverage and quickly situates visitors in the context of the New York Times.
Defined as a whole, site navigation is:
- The theory and practice of how people move from page to page on a website
- The process of goal-directed seeking and locating hyperlinked information
- All of the links, labels, menus, and other elements that provide access to pages and help people orient themselves while interacting with a site
Effective navigation design should:
- Provide access to information
- Show one's location on a site
- Show the "aboutness" of a site
- Reflect your brand
- Enhance your credibility
- Impact conversion
For more on how navigation interacts with the rest of the homepage:
Navigation Design
The core function of website navigation is to provide access to information. Web designers use various mechanisms to help visitors find what they're looking for, and how those mechanisms get mixed and matched is the foundation of good navigation design. The four basic systems below are worth considering on their own first, before looking at how they combine.
Content-Linking
Linking content from one page to another is an essential local navigation tool. But imagine a collection of pages on a website linked only to one another, with no hierarchical organization or pattern of linking. All the links sit embedded in text, and a visitor navigates only through linked pages.
The site becomes a big, confusing, impossible-to-sort web of related information. Visitors can follow threads forever without finding the page they actually want.
Keyword Searching
Many websites employ a search bar to help visitors find targeted information using keywords. On a content-heavy site like the New York Times, search may be essential for navigating archives that go back decades.
Yet imagine a website where there is no navigation or linking, only keyword search. Search provides an efficient way to find relevant content, but only if the visitor already knows what they're looking for. Without prior knowledge or intent, important information stays hidden behind the visitor's own search proficiency.
A few points where the search-bar pattern is doing more work than it used to:
- Top-right header is the conventional placement for a global search bar on most desktop sites, with a magnifying-glass icon on mobile
- Persistent search belongs on sites with deep content libraries, knowledge bases, documentation, and large e-commerce catalogs
- Faceted search is the e-commerce extension of keyword search, layering filters (size, color, price) onto the keyword query so visitors can narrow results without clicking through category trees
- AI-driven and conversational search is becoming more common on knowledge-base and product sites, accepting natural-language queries and returning answers rather than lists of links
Structural Browsing
Nearly all websites use structural browsing (systems of menus, sidebars, and grouped links) to help visitors find pages and related content. It's the most familiar navigation mode, and the one visitors expect by default.
Imagine a website where navigation is only possible through menus, submenus, and sidebars. Visitors can click through a hierarchy of navigation to find content, but to leave a page they have to navigate back up and down the site's structure.
Creating a System of Balanced Navigation
These examples are deliberately ridiculous. No site would ever be structured this way. But looking at them shows why a balanced website needs multiple navigation mechanisms working together.
A well-designed navigation system uses many of these modes (likely all of them), and most visitors intuitively shift between them to find exactly what they want. In reality, web navigation almost always looks like this: a designed system of structural browsing, content linking, hierarchical information, and search, all kept in balance.
Navigation Structure
Beyond choosing the systems and mechanisms, web designers also approach navigation by shaping the site's structure. This is information architecture: the discipline of organizing content so people can find it. Communicated visually, a website's navigation structure shows how many clicks or interactions it takes for a visitor to reach the deepest content on the site, and the diagram below shows what happens when that structure gets too deep.
With a homepage, section pages, subpages, and two more layers of subpages beneath that, this structure represents a website with deep navigation. Visitors have to traverse five vertical levels to find information. A site like this would feel overwhelming and confusing.
This is why navigation structure matters so much. The current best practice is to keep the hierarchy as flat as possible, so visitors can reach any page on the site in two or three clicks. Reorganized, the structure above might be flattened to look like this.
Content is always more discoverable when it isn't buried under multiple intervening layers. Specific, distinct categories also tend to be easier to understand than general ones, and a flat hierarchy naturally encourages specificity by avoiding unnecessary subcategories.
Two related rules of thumb that the flat-hierarchy argument depends on:
- Keep primary navigation to five to seven items. Past seven, visitors have a harder time scanning the menu and remembering what's there. Sites with deeper catalogs handle the rest with dropdowns, mega menus, or search.
- Limit the depth, not the breadth. It's better to have a few extra top-level items than to bury content three levels deep behind tidy-looking categories.
Contextualized, a flat hierarchy might look like this: a homepage; about, service, contact, and blog pages; and digestible subcategories beneath each. The diagram below shows the pattern in practice.
For more on the structural decisions behind a flat hierarchy:
Global Website Navigation
Global website navigation is one of the most common navigation systems in use today, especially as more sites lean on flat hierarchies and uncomplicated structures. Global website navigation describes a main navigation bar and its component subpages that stays identical across every page of a site, usually including a header main menu and a footer navigation menu.
While global navigation may contain subpages, clicking through to a page or subpage doesn't reveal an additional hierarchy of menu items. The menu stays the same regardless of where a visitor lands, which helps maintain an uncomplicated information hierarchy. The pattern works best when it follows a small set of well-tested rules.
1. Establish groups of content and assign each a name
Before designing a navbar, decide which pages it should include and how to group them. The selection process matters more than the visual design, because it sets what visitors can and can't reach in one click.
Most global navigation bars include service or product pages, contact pages, blogs, and case studies or work samples. The right combination depends on what visitors actually want from your site, not what feels comprehensive to whoever owns the project.
2. Put them in the right order
Once the pages are chosen, ordering them is often an analytical and data-driven decision. Existing analytics data, heat maps, and observed visitor paths can confirm which pages people care about most.
In short: what do visitors want to see after viewing the homepage? Broadly, data suggests that around 86% of visitors want information about a company's products and services after viewing the homepage. Those pages typically lead navigation bars for that reason.
The Serial Position Effect also matters. People remember the first and last items in a series most easily, so the most important destinations belong at the beginning and end of the menu, with secondary items in the middle. This is why "Contact" usually sits at the far right of a global navigation bar, anchoring it. If the right order isn't obvious and the site is already live, analytics tools can map visitor flow through the site to inform the decision.
3. Implement the same top-level navigation in every region of the interface
The "global" in global navigation means the entire site, so the menu should appear identically on every page. It should also stay in the same place on every page. Changing placement or design between pages disorients visitors and feels broken even when nothing technically is.
A growing convention here is the sticky or persistent navbar: a header that stays pinned to the top of the viewport as visitors scroll. Sticky navigation works well on long content pages where visitors might want to jump to another section without scrolling back to the top. It works less well on short marketing pages, and on mobile it eats valuable screen real estate, so make it collapse or shrink when space gets tight.
4. Indicate the visitor's current position through a change in visual design
Because global navigation looks the same on every page, the design has to tell visitors where they are. The most common signals are bolding the current page's link, underlining it, changing its color, or adding a small icon.
This pattern is also an accessibility requirement, not just a usability nicety. The current-page indicator needs to be more than visual, which the accessibility section below addresses.
For more on how global navigation fits with the rest of the homepage:
Hierarchical Website Navigation
Hierarchical website navigation means that menus change depending on the context of each webpage. Sometimes hierarchical navigation is paired with a global navigation bar. Other times, sites are structured strictly hierarchically. Most newspapers, content-based websites, and retail companies use hierarchical navigation, since their sites are organized around detailed categories of content or products.
Take the New York Times again. Visitors landing on the homepage see links to top news sections in the header.
If the menu were global, the pages would stay the same after clicking into a section. Because the NYT uses a hierarchical system, clicking on a section reveals a new page with new links that lead to additional subcategories.
Back on the homepage, opening the optional dropdown menu reveals the site's full list of pages, complete with sections, pages, and subsections. The whole hierarchical structure becomes visible in one view.
Hierarchical navigation makes sense for many businesses, but it has to be designed carefully. Hierarchical structures communicate a lot of information through pages and subpages, and an unconsidered design risks overwhelming visitors with confusion and dead ends.
Of all the types of website navigation, hierarchical also shows up in several specific patterns. Each pattern solves a slightly different problem.
Dropdown menus
The most familiar hierarchical pattern. Hovering or tapping a top-level item reveals a vertical list of subpages. Dropdown menus are good when each top-level category has a small, scannable set of subpages (around five to eight). Past that, the dropdown becomes a wall of links and a mega menu becomes a better choice.
Two design choices tend to make or break dropdowns:
- Hover vs. click. Hover-only dropdowns feel responsive on desktop, but they're an accessibility failure. Visitors using a keyboard, a touchscreen, or a screen reader can't trigger a hover. Modern best practice is click-to-open with hover as a progressive enhancement, or a small delay on hover so accidental cursor passes don't open menus the visitor didn't want.
- Scope and labeling. Each item inside the dropdown should be clearly labeled and lead to a real page. Avoid stuffing dropdowns with low-value subpages just because there's space.
Mega menus
A mega menu is essentially a dropdown that takes over a large rectangular area below the navbar, organizing many links into visual groups. Mega menus are the dominant pattern on e-commerce sites, large content libraries, and multi-product B2B companies because they let visitors see an entire section's worth of options at once.
A mega menu works when its contents are visually grouped, each group has a clear label, and the layout reads as scannable rather than cluttered. It backfires when it gets used as a dumping ground (every page on the site, listed in three columns of nine-point text), and it can be a poor fit for small business sites that don't actually have enough content to fill it.
On mobile, mega menus typically convert into nested accordions or a full-screen drawer. The desktop layout almost never translates directly.
Sidebar and vertical navigation
Sidebars run vertically along the left or right edge of the page rather than as horizontal navigation across the top. This pattern is common on documentation sites, web apps, dashboards, and any product where visitors spend sustained time and need to jump between many sections.
Sidebar navigation has real strengths: it can hold more items than a horizontal navbar without becoming unreadable, it scales gracefully as the site grows, and it pairs naturally with persistent context like a logged-in user state. The trade-off is that it consumes left-column real estate that the rest of the page might want, and it feels less familiar to visitors arriving from a typical marketing site.
A useful hybrid: a persistent sidebar that collapses to a thin icon rail on smaller screens or when the visitor focuses on the main content area. Stripe's documentation, Notion's app, and Linear's product all use variations of this approach.
Pattern consistency for navigational elements
When a hierarchical navigation system shows subpage links on hover or click, the rule is simple: all top-level items should reveal subpages, or none of them should. Mixing the two creates visual inconsistency that visitors interpret as broken behavior.
The exception is a clearly distinct call-to-action item like "Contact" or "Donate" anchored to the right side of the menu. That item often gets visual treatment (a pill button, a different color) to signal that it doesn't behave like the others.
Pattern consistency for primary navigation items
The same consistency rule applies to whether top-level items are themselves clickable. Either every primary navigation item links to a landing page, or every item is a header for a dropdown only.
If the primary item is also a clickable landing page, the design should make that obvious through underlining, a hover state, or other visual treatment. GAP's navigation handles this well.
On GAP's site, hovering over a main menu item like "Jeans" reveals hierarchical subpages and underlines the main item. Visitors understand that clicking on "Jeans" will lead to a main landing page, or they can preempt that by jumping directly to a subpage from the dropdown.
Breadcrumbs (and structured data)
Breadcrumbs are a navigation aid that orient visitors within a site, particularly on sites with many categories and subcategories. They're also useful when visitors land on deep pages from an external source like a search engine.
Breadcrumbs usually appear as a list of pages and subpages a visitor traveled through to reach the current page, often highlighted along a single horizontal line. Take the page "Graduate School of Education Career Services" on Fordham University's site.
If a visitor arrived on this page from a search engine, the top section of the page shows the hierarchical structure: "Home / Resources / Career Resources / Career Services / Career Services Info for Graduate Students / Graduate School of Education Career Services."
Breadcrumbs also help search engines. Adding BreadcrumbList structured data to the page tells Google how the page sits within the site's hierarchy, and Google often surfaces those breadcrumbs in search results in place of the URL string. A SearchPilot SEO split test on a large e-commerce site found that re-introducing visible breadcrumbs paired with server-side BreadcrumbList schema produced a statistically significant 5% lift in organic traffic.
For more on hierarchical patterns in a B2B context:
Local Navigation
Local navigation works alongside global and hierarchical navigation to help visitors find their way within a particular subpage, or as a way to jump between related pages. Visitors typically encounter it as a set of menu items at the same hierarchy as the current page, or as a link embedded in body text that points to other relevant content.
Local Links
Newspapers, magazines, and content publishers use local links throughout their articles. Many companies use them in their blog content too.
In a publisher context, local links help visitors explore the deeper context around an article. If an article references a topic covered earlier, the publisher can link to that earlier article instead of explaining it in depth.
Beyond helping visitors move horizontally through the site, local links and other navigation links matter for SEO. Internal links between pages help search engines discover, index, and understand how pages relate to each other. When Google indexes one page, it follows internal links to find others, and the link text gives Google additional signal about what each linked page is about.
For more on what to do once visitors arrive at a page:
Page-Level Navigation
Local navigation also takes the form of page-level menus that show visitors related options at the same level as the current page, or beneath it. Page-level navigation lets visitors transition between pages within a single section, or provides context for nearby content. It's most developed on e-commerce category pages, where it pairs with faceted search filters to let visitors narrow a long list of products quickly.
Viewing the "Women" page on Banana Republic's site, for example, surfaces additional lateral or vertical movements within the women's clothing section. Faceted filters for size, color, and price act as a finer layer of navigation on top of that, letting visitors narrow a long list of products without backing out to a higher-level menu.
Navigation Best Practices
So what are the essentials, and the not-so-obvious essentials, that go into navigation that visitors actually find user-friendly? Most of what makes navigation feel right is restraint and consistency, the same qualities that distinguish good website design generally. The four practices below are where most user experience, usability, and UX design gains come from.
Plan your navigation structure, and choose the right pages
Navigation design deserves the same attention as visual composition, content, and the rest of the site's structure. Before anything else, take a detailed look at the site: its goals, its functions, and its content. Plan the navigation as simply as possible and as intuitively as the site's purpose allows.
Different user needs call for different patterns, so the planning step is mostly about asking the right questions. Three worth answering before any navigation design happens:
- What tools and navigation mechanisms do users need to find the information they're looking for?
- What kinds of pages does the site genuinely require, and what's the simplest way to organize them?
- How should a visitor move through the site to convert into a customer? How does the website navigation menu support the buyer's journey, not work against it?
The third question is usually the one that gets skipped. The site's navigation isn't just a way to find pages. It's the structural map of the customer journey, designed to guide users from one specific page to another in the order that turns visitors into customers.
For more on mapping that journey:
Flatten your navigation structure
Once the questions above are answered, simplify the navigation and make the structure as flat as possible. The goal is for visitors to reach any page they care about in two or three clicks.
A flat navigation structure makes finding information feel effortless. Visitors don't get lost, they don't backtrack, and they don't bounce out of frustration. Instead of linking to a handful of specific pages from the homepage and then expanding into ever-deeper subcategories, keep things precise and targeted. Group pages into tight, targeted categories rather than ever-expanding headings of general topics.
This is also where small businesses tend to over-design. A four-page site doesn't need a mega menu. A ten-page site rarely needs a dropdown.
Don't forget your footer
Footers are an often-overlooked but important part of site navigation, and they're the most common form of secondary navigation on the web. Visitors who scroll all the way to the bottom of a page are more engaged than the average visitor, so it's worth giving them something useful and surfacing the important links they might miss higher up.
Footer menus are typically more granular than the global navigation, and they often include:
- Privacy policies and terms of use
- Career pages
- FAQs
- Press articles or media information
- Customer support
- Newsletter and blog signups
- Social media links and contact information
- Secondary CTAs that didn't earn a spot in the global navigation
Because the footer doesn't compete for screen real estate the way the header does, it's a good place to surface the site's quieter pages without burying them. Engaged visitors tend to find them there, even when they're not in the global navigation.
Most of all: don't forget mobile
Mobile devices now generate the majority of global web traffic, and visitors expect a navigation that's been designed for the device, not just resized to fit. Two related stats are worth keeping in mind:
- A 1-second delay in mobile page load time can cut conversions by around 7%, and slow menu animations cut directly into any performance optimization gains elsewhere on the site
- Touch targets need to be at least 44×44px (Apple's Human Interface Guidelines) or 48×48dp (Material Design) so visitors can tap them reliably without accidentally hitting a neighbor
Most desktop designs need to be redesigned for mobile, not just adapted. Mobile menus have to account for thumb reach, screen real estate, and the fact that visitors are often distracted, on the move, or holding the phone in one hand.
A few templates dominate modern mobile navigation. None is universally right; the choice depends on the type of site and what user needs the navigation has to serve.
- Hybrid navigation (the most common default). Three to five critical items shown directly in the header, with a hamburger icon for everything else. This pattern surfaces the most-used destinations without hiding them, while keeping the menu manageable for visitors who want more.
- Bottom-tab navigation. Three to five primary destinations pinned to the bottom of the viewport, app-style. Common in app-like products and high-frequency-use sites where visitors return often.
- Off-canvas drawer. Tapping the hamburger slides a panel in from the side, usually containing the full navigation hierarchy. Useful for sites with deep hierarchies. This pattern is the mobile version of the sidebar pattern discussed earlier.
- Full-screen overlay. Tapping the hamburger expands to a full-viewport menu rather than a sliding drawer. Common on marketing-led sites because the extra space gives breathing room for category labels, secondary CTAs, and contact info.
- Hamburger-only (legacy default). A hamburger menu icon as the only entry point to the navigation. Still appropriate for very simple, content-light marketing sites with three or four pages. No longer the right default for anything with more depth.
The right pattern depends less on what's trendy and more on how the site gets used. A simple marketing site with five pages and a contact form doesn't need bottom tabs. A documentation portal that visitors live in for hours probably should consider them.
Look at the New York Times' mobile experience. The desktop main header menu is gone, since a menu of that size would be unusable on a phone screen. The "Account" link is replaced with a universal user icon, and all the navigation lives inside a single dropdown menu, sometimes called a hamburger menu. When opened, the mobile menu sorts every section of the site into groups, with a search bar above the menu items.
The NYT's mobile navigation isn't just a smaller version of the desktop. It's been redesigned around the actions, behavior, and accessibility of mobile use.
For more on mobile navigation in B2B contexts specifically:
Animation and motion in navigation
Helpful navigation motion is fast, subtle, and signals state change. Dropdown transitions of around 150 to 200 milliseconds, a hamburger icon morphing into an X when tapped, a focus ring fading in when a visitor tabs onto a link. None of it draws attention to itself; it just makes the navigation feel responsive.
Unhelpful motion is the opposite. Slow, elaborate transitions delay every interaction, heavy parallax inside a menu can trigger motion sickness for some visitors, and animations on every hover or click eventually feel exhausting. The simplest test: if you notice the animation, it's probably too much.
Two design rules worth following:
- Respect
prefers-reduced-motion. This CSS media query lets visitors who experience motion-related discomfort opt out of animations at the operating system level. Honoring it is a small accessibility win that costs almost nothing - Animate state, not decoration. Motion should communicate that something happened (a menu opened, the page is loading, a link gained focus), not just look interesting
Accessibility and Keyboard Navigation
Accessible navigation isn't just for visitors with disabilities. Keyboard navigation helps power users move faster, visible focus states help anyone who's lost their place, and properly labeled controls help everyone, including search engines reading the page. The curb-cut effect: features built for accessibility consistently make sites better for everyone.
Accessible navigation is also the legal floor in most jurisdictions. WCAG 2.1 AA is the standard most regulators and courts reference, and ADA-related lawsuits over inaccessible websites are becoming more common, particularly against B2B and e-commerce sites. A few patterns make navigation accessible without much extra work.
- Keyboard traversal. Every navigation item needs to be reachable and operable with the Tab key, Enter, and arrow keys. Dropdown menus that open only on hover are an accessibility failure because keyboard visitors and many touchscreen visitors can't trigger a hover. Click-to-open is the safer default
- Visible focus states. When a visitor tabs onto a link, the browser shows a focus ring around it by default. Removing that ring without replacing it with a custom focus state is one of the most common accessibility mistakes. The focus indicator should have at least a 3:1 contrast ratio against the background
- ARIA labels and roles. When a control's purpose isn't obvious from its visible text (an icon-only button, a hamburger toggle), add an
aria-labelso screen readers can announce it. Userole="navigation"(or the native<nav>element) on the wrapping menu container so assistive technologies recognize it as navigation - Skip links. A "Skip to main content" link at the very top of every page lets keyboard and screen reader visitors bypass the navigation on repeat visits without tabbing through every menu item. The link can be visually hidden until focused, so it doesn't affect the design
- Typography, color contrast, and font sizing. Menu text needs to meet WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large). Aim for at least 16px font size on desktop and 18px on heavy-mobile sites. The "elegant light gray on white" pattern often fails both checks
- Current-page indication. The current page should be communicated more than just visually. Adding
aria-current="page"to the active link tells screen readers where the visitor is, which is the same information sighted visitors get from a bolded or underlined link
For more on accessibility and the legal context:
Where to start
Of everything covered here, two changes have the highest payoff for the time they take. The first is to flatten the hierarchy. If visitors can't reach an important page in two or three clicks, the navigation is doing more harm than good. Flatten the structure first, then worry about the visual design of the menu.
The second is to test on mobile. Most mobile navigation problems aren't caught during desktop design. Open the site on an actual phone, try to reach every important page with one hand, and notice every place the navigation slows you down. That's the visitor's experience too.
Get those two right, and the rest of the work (the patterns, the polish, the accessibility refinements) gets much easier. Each one becomes an upgrade rather than a rescue, and the user experience improves with every pass.
For more on what comes next: