Navigation is the part of a website that moves someone from one page to the next without them losing track of where they are. Menus and links do the moving. Labels tell people what’s waiting behind each one.
Pretty much every commercial site and content platform runs one, usually split across a header, a footer, and a handful of secondary menus. Teams check whether it works through usability testing and by counting click depth.
Baymard Institute benchmarked homepage and category navigation across leading ecommerce sites in 2025. 67% of mobile sites came back somewhere between mediocre and poor. No site in the study earned a perfect result.
What Is Website Navigation?
The system sits above the content instead of inside it. That layer of menus, links and labels connects a homepage to product pages, to articles, to account settings, and it does that without reloading the entire experience.
People say menu when they mean navigation. The two aren’t the same. A menu is one visible component, the list of links in a header, say, while navigation as a user interface system covers that menu plus breadcrumbs, footer links, and any in-page jump links working together.
A sitemap is something else again. It indexes every page a site has, built mostly for search engines or for that “site map” page buried in most footers.
Navigation exists for the moment-to-moment act of browsing. Completeness is the sitemap’s job, and nobody uses one daily.
What navigation has to do is connect the page someone’s on to every page they might want next, using as few clicks as the size of the site allows. Stating that is easy. Doing it on a site with forty thousand URLs is not.
Underneath all of it you have labels, the words that tell a visitor what’s behind a link, and links, the thing that actually moves them. Mega menus, breadcrumbs, sticky headers, off canvas panels, faceted filters: each one is a different arrangement of those two pieces.
What Are the Types of Website Navigation?
Primary, secondary, breadcrumb, footer, mega menu, faceted. Those are the recurring ones, and each handles a different slice of the same problem, so most sites end up running several at once instead of picking a favorite.
| Type | Typical Placement | Best For | Example |
|---|---|---|---|
| Primary | Header | Top-level categories | Amazon department menu |
| Secondary | Sidebar or in-page | Subcategories, settings | Software account menus |
| Breadcrumb | Below header | Deep, nested content | Product category trails |
| Footer | Page bottom | Legal and utility links | Privacy policy, sitemap |
| Mega menu | Header dropdown | Large catalogs | Retail department stores |
| Faceted | Sidebar filters | Filterable listings | Ecommerce search results |
Primary Navigation
The top-level menu in the header names a site’s main sections. It’s the one nearly every visitor reads first.
- Home
- Product or service categories
- About, contact, or account
Most sites hold this to five or six labels. A header crammed with a dozen options stops working as a map and starts reading as noise.
Secondary Navigation
One level down from primary, secondary navigation surfaces subcategories or in-page sections after a visitor has already chosen a destination. On desktop it usually shows up as a sidebar navigation pattern, appearing only once someone has landed inside a category.
What goes in it depends entirely on the site. A blog will list related tags or categories. A software product will list settings, billing, team members, notification preferences, that kind of thing.
Breadcrumb Navigation
A breadcrumb trail shows the path from the homepage down to wherever the visitor currently is, usually as a thin horizontal line under the header. Home / Category / Subcategory / Product is the standard shape.
It answers “where am I” before anyone has to consciously ask. Schema.org’s BreadcrumbList markup also gets these breadcrumbs into Google’s search results, which is a small SEO bonus sitting on top of the usability one.
Footer Navigation
Whatever doesn’t belong in the header still needs a home, and the footer is where it lands.
- Legal pages (privacy policy, terms)
- Utility links (sitemap, careers, press)
- Secondary company info (about, contact)
It’s the last thing most visitors see. For the ones who scroll straight to the bottom hunting for a phone number, it’s the first.
Mega Menu
A large dropdown panel, split into columns, showing many links and categories at once instead of one vertical list. That’s the mega menu.
Hover-based mega menus now serve as the main navigation on 88% of top US ecommerce sites, according to Baymard Institute’s ongoing benchmark of hundreds of ecommerce homepages.
Amazon groups departments like Electronics, Books and Toys into hoverable columns, which lets a shopper drop straight into a subcategory instead of clicking through three separate pages to get there.
Faceted Navigation
Faceted navigation filters a list of results by several attributes at once. Price, size, brand, color, whatever the catalog supports.
- Price range
- Brand
- Size or color
- Customer rating
It’s the odd one out here, because it changes the content of the page you’re already on rather than sending you somewhere new. That’s also why it lives in a sidebar beside the results instead of up in the header.
Where Does Website Navigation Belong on a Page?
Placement follows a small set of zones that have been proven out over twenty-odd years of the web. Most designs stay close to convention because the alternative slows down a first-time visitor for no payoff.
- Header, for primary navigation, visible the instant a page loads
- Sidebar, for secondary or in-page navigation once a section is open
- Footer, for utility and legal links nobody needs on first glance
- Fixed or sticky position, for navigation that has to stay reachable through a long scroll
Primary navigation almost always sits above the fold, the part of the page visible before any scrolling happens, since that’s the only real estate guaranteed to be seen.
A sticky navigation bar fixes one specific annoyance. On a long page, a header that vanishes after the first scroll forces people back to the top just to switch sections, and that gets old fast on a 4,000-word article.
The hamburger icon, where a site uses one, sits in the same header zone. It’s just collapsed into a single tappable trigger rather than spread out.
Website Navigation Hierarchy and Structure
Hierarchy is the layered structure a menu is built on, running from top-level categories down to individual pages. Sites go flat, where most pages sit a click or two from home, or nested, where categories branch into subcategories several levels deep.
Flat Structure vs Nested Structure
Flat means fewer categories and shallow menus, with most content reachable in one or two clicks. It holds up well for smaller sites, a few hundred pages at most.
Nested is what happens when a catalog or content library outgrows that. Categories branch into subcategories, those branch again, and the menu gains depth because there’s no honest way around it.
Neither is right in the abstract. A five-page brochure site shoved into a nested structure just adds clicks for nothing. A ten-thousand-product catalog forced flat turns into an unusable wall of links.
Click Depth
Click depth counts the clicks between the homepage and any given page.
A hierarchy mapped out early in a wireframe rarely ends up deep by accident, because that’s the cheapest moment to catch the problem, before anyone has built a page.
Go too deep and discovery through browsing drops off. Internal search starts carrying traffic it was never meant to carry, and crawlers get slower and less thorough about reaching the bottom of the tree.
That said, not every page needs to sit two clicks from home. A support article buried in a help center can live deeper without hurting usability, because people get there through search anyway.
Website Navigation Design Principles
Hick’s Law, Fitts’s Law and Miller’s Law turn up in most navigation arguments. One predicts what happens when you offer too many choices, another deals with targets that are awkward to hit, and the third gets misapplied more often than the other two combined.
All of them trace back to the same idea behind user-centered design: build around how people actually think, not around how a company’s org chart happens to be arranged.
Hick’s Law
Decision time goes up as the number of choices goes up. That’s the whole law.
It cuts in both directions, though. Pile too many items into the top level and every single decision gets slower. Strip it down too far and important content ends up stranded on subpages nobody finds.
The National Cancer Institute’s federal design system takes this literally in its own documentation, capping mega menu navigation at seven main items specifically to keep the header easy to scan.
Fitts’s Law
How long it takes to hit a target depends on how big the target is and how far away it starts. On a touchscreen that stops being a general guideline and turns into a hard number.
Apple’s Human Interface Guidelines put the minimum touch target at 44 by 44 points. Google’s Material Design sets its own floor at 48 by 48 density-independent pixels.
Size a hamburger icon or a menu link below either figure and mistaps go up. A mistapped nav link is worse than a mistapped photo, too, since it dumps someone on an entirely wrong page rather than doing nothing at all.
Miller’s Law
Working memory handles roughly seven items at once, give or take two. True enough as a finding about memory.
Where it goes wrong is the leap to capping a navigation menu at seven items, as though visitors were expected to memorize the list. Nielsen Norman Group’s research on chunking corrects this directly. There’s no usability gain from limiting menu items to seven, because a visible menu runs on recognition, not recall.
Twelve well-organized categories will beat seven vague ones every time. Organization does more work than raw count.
Those three ideas, plus Steve Krug’s argument that a page should never make a visitor stop and think, sit behind most modern web design principles for navigation. Break one and it turns up in usability testing almost immediately.
Website Navigation Accessibility Requirements
Accessible navigation has to work with a mouse, a keyboard and a screen reader. Not just look fine to a sighted person scrolling with a trackpad.
Most of the weight sits on consistent structure, proper markup, and some way to skip past the navigation block entirely.
WCAG Requirements
The Web Content Accessibility Guidelines are the baseline most legal standards point back to, the ADA and Section 508 among them, plus the EU’s EN 301 549.
Navigation audits keep landing on the same couple of criteria.
- Success Criterion 3.2.3, Consistent Navigation: repeated navigation must appear in the same relative order on every page (W3C, Level AA)
- Success Criterion 2.5.8, Target Size Minimum: interactive elements need at least 24 by 24 CSS pixels, added in the WCAG 2.2 update published by the W3C in October 2023
That second one catches a lot of sites off guard. A row of tightly packed footer links, or a mega menu with cramped columns, is one of the more common ways navigation fails it without anyone on the team noticing.
ARIA Landmarks and Skip Links
Semantic HTML gets a screen reader most of the way there. ARIA landmark roles close what’s left by explicitly labeling a region as navigation.
Using role=”navigation”, or the native <nav> element, tells assistive technology where the navigation block starts and stops. A screen reader user can then jump straight to it instead of tabbing through the whole header first.
Skip links do something similar for keyboard users, letting them leap past the entire navigation block with one keypress and land on the main content.
A skip link is normally invisible until it receives keyboard focus, and then it becomes the very first thing a keyboard user sees on the page.
Sites with serious web accessibility commitments, government portals in particular, test skip links first. A missing or broken one blocks every other accessibility feature sitting behind it.
Mobile Navigation Patterns
Small screens come down to the hamburger menu, the bottom tab bar, and the off canvas panel. Each trades a different amount of screen space for a different amount of discoverability.
Teams usually start from a mobile-first design approach for exactly this reason. These tradeoffs get much harder to unwind once a desktop layout is already locked in.
Hamburger Menu
The hamburger menu hides the full navigation behind one icon, three stacked lines in a corner of the header.
Nielsen Norman Group’s usability research (Pernice and Budiu, 2016) found content discoverability dropped by more than 20 percent on sites using hidden navigation, compared with visible or combo navigation, across a study of 179 participants and 6 live sites.
It saves more header space than anything else, and by now virtually every mobile user recognizes the icon on sight. The cost is that whatever sits inside stays invisible to anyone who doesn’t think to look, and every trip through the menu costs an extra tap.
Bottom Tab Bar
Three to five icons pinned along the bottom edge of the screen, each one a permanent shortcut to a major section. Nothing gets hidden.
The position helps too, sitting right in the thumb’s natural reach zone on a phone held one-handed. The limits are real though. Past five items the icons get too cramped to tap accurately, and the bar eats permanent vertical space on every single screen.
Instagram and most major social apps default to this pattern for that reason. A handful of core destinations, always one tap away, never buried.
Off Canvas Menu
An off canvas menu slides in from the side, usually the left, covering part or all of the screen while the original content sits parked just out of view.
- Triggered by a hamburger icon or an edge swipe
- Can hold more items than a bottom tab bar comfortably fits
- Often layered with icons, labels and account info together
Capacity is what you’re buying. An off canvas panel holds far more items than a bottom tab bar ever could.
And it inherits the hamburger’s problem: nothing inside exists until a visitor thinks to open it. Pairing it with clear, familiar labeling rather than an icon on its own helps.
How Website Navigation Affects SEO and Crawlability
Search engines find most of a site the same way a person does, by following links from page to page. There’s no teleporting straight to the content.
A link sitting in primary or footer navigation carries more weight than one buried three scrolls down inside a paragraph. Navigation links repeat sitewide, which signals which destinations the site itself considers important.
Google’s own documentation is clearer about crawl behavior than most people expect.
- Google only recommends active crawl budget management for sites with 1 million or more pages that update weekly, or 10,000 or more pages that update daily (Google Search Central documentation)
- Crawl budget itself comes down to two factors: how much a server can handle without strain, and how much Google actually wants to crawl the site (Google Search Central documentation)
- Google’s crawl budget guidance now calls for the same set of navigation links on mobile and desktop versions of a page, or a matching sitemap entry when that isn’t possible (Google, 2024 update)
That last point matters more than it sounds. A site that strips half its navigation out of the mobile layout is quietly hiding pages from the version Google’s crawler primarily indexes today.
Click depth does the same work for crawlers that it does for people. They follow the same paths, just without getting impatient about it.
Flatter structures also cut down on orphan pages, the ones with no internal links pointing at them at all. An orphan can still get indexed if it sits in the sitemap, but it rarely ranks well, since no internal link equity reaches it from anywhere else on the site.
Breadcrumb structured data adds one more layer on top. Google’s structured data guidelines expect the trail to mirror the site’s actual navigational hierarchy instead of acting as decoration, so a breadcrumb that doesn’t match the real click path can do more harm than skipping it entirely.
How to Design and Test Website Navigation
Test navigation before you build it. Fixing a broken structure after launch means rebuilding the user experience along with every URL, every redirect, and whatever muscle memory returning visitors already built up.
The research usually runs in this order:
- Card sorting, to learn how visitors naturally group content
- Tree testing, to check whether a proposed structure is actually findable
- Usability testing, to watch real people use the finished navigation on a working prototype
Auditing comes after launch rather than before it, catching whatever the earlier methods couldn’t predict.
Card Sorting
Participants get a stack of content topics written on individual cards and group them into categories that make sense on their own terms.
Open card sorts let people create and name their own categories. In a closed sort the categories are already defined by the team, and participants just place cards into them.
GOV.UK’s navigation team ran a closed card sort with 70 participants while rebuilding the taxonomy behind its education content, then paired it with tree testing on a further 65 people to check the result held up.
Tree Testing
Tree testing strips out every bit of visual design and tests the navigation labels and hierarchy on their own, as plain clickable text. Find where the warranty policy lives, say, then click through a bare-bones version of the site until you hit the right page or give up.
Sample size matters more here than in most UX methods. Optimal Workshop’s own tree testing methodology recommends around 50 participants per user group for results that hold up statistically.
It also comes later than card sorting, once a structure already exists on paper. You’re checking a hypothesis, not brainstorming one.
Usability Testing
Nielsen Norman Group’s original research (Nielsen and Landauer, 1993) found that testing a design with just 5 participants surfaces about 85% of its usability issues.
For navigation that means putting a clickable mockup in front of five or so people and watching where they hesitate while trying to find pricing, start a return, or track down the contact page.
The signals are small ones.
- Where a participant pauses before clicking
- Which label they click first, and whether it’s the right one
- Whether they backtrack after landing on the wrong page
Five participants won’t catch everything, obviously. Rare edge cases and problems that only affect a minority of users need a bigger round of testing before they show up at all.
When Website Navigation Fails
Navigation fails quietly most of the time. Nobody files a bug report about a menu that’s merely confusing. They just leave.
Most of the damage traces back to the same handful of patterns.
- Too many top-level choices
- Icons with no text label
- Inconsistent navigation across pages
- Navigation links that depend on JavaScript to exist
- Nesting so deep that pages stop getting found
Too many top-level choices isn’t just a theoretical Hick’s Law violation. It looks like someone abandoning a crowded menu partway through reading it, then reaching for the back button instead of picking anything at all.
Icons without text labels ask every visitor to guess what a symbol means before they’ll risk clicking it. Add a screen reader with nothing to announce and the same icon manages to fail two audiences for two unrelated reasons.
Navigation that reorders itself, or quietly drops items, from one page to the next wrecks the mental map a visitor built on page one. They stop trusting the menu and fall back on the browser’s back button, which is its own kind of failure.
JavaScript-only navigation carries a subtler risk. Google processes JavaScript in phases, crawling the raw HTML first and rendering the JavaScript in a separate pass later, sometimes with a real delay between the two (Google Search Central documentation).
So a link that only appears after JavaScript executes isn’t invisible to Google the way it used to be. It does sit in a slower queue than a plain HTML link, and a rendering error anywhere in that queue means the link, plus everything behind it, never gets followed.
Deep nesting is the last one, and the easiest to talk yourself into. Every “just one more subcategory” adds a click, and a few of those stacked together will bury a page past the point where browsing alone ever finds it.
None of these failures needs bad intentions behind it. A broken menu is almost never one big mistake. It’s five small, reasonable-sounding decisions piled on top of each other.
FAQ on What Is Navigation
What Is the Difference Between Website Navigation and a Sitemap?
A sitemap indexes every page a site has and exists mainly for search engines. People rarely visit one. Website navigation is the visible menu system built for daily browsing, tuned for speed rather than completeness.
What Is the Difference Between Website Navigation and a Menu?
A menu is one visible component, the list of links in a header, say. Website navigation is the whole system: that menu plus breadcrumbs, footer links, and every other path a visitor can take through the site.
Is a Mega Menu the Right Choice for Every Site?
No. Mega menus solve one problem, which is large catalogs with deep category trees. A five-page brochure site gains nothing from one and loses simplicity instead. Keep them for sites where category depth genuinely overwhelms a standard dropdown menu.
How Many Items Should a Navigation Menu Have?
There’s no fixed number. Miller’s Law doesn’t cap menus at seven, since a visible list runs on recognition rather than memory. Five to seven items keeps a header scannable, but clear labeling beats raw item count every time.
What Should You Fix First in Website Navigation?
Fix accessibility failures first, because they block people from using the site at all. Structural problems come next, since broken hierarchy and excessive depth stop people finding things even when the mechanics work fine. Visual and mobile polish goes last. It only degrades the experience rather than preventing it.
- Accessibility failures: keyboard traps, missing skip links, undersized touch targets
- Structural failures: deep nesting, orphaned pages, inconsistent menus
- Visual and mobile refinements: spacing, labeling, animation
One thing worth flagging on that first group. WCAG’s 24 by 24 pixel minimum is the legal floor, and it sits well under Apple’s 44 point guidance and Google’s 48 pixel one. A menu that clears the legal minimum and nothing more still fails both major mobile platforms’ own design standards.
Most of that structural work eventually leads to one component worth understanding on its own, which is a dropdown in UI design.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- What is Backend in Web Development? - September 13, 2026
- What is Frontend Development? - September 11, 2026
- How to Make a Button in Figma: Design Best Practices - September 10, 2026
