Missing Navigation Menu

Your website has no primary nav menu. Visitors are wandering a building with no signs, no directory, and no idea where anything is.

What is this?

Imagine walking into a building with no signs, no directory board, and no reception desk. You can see doors, but you have no idea what is behind any of them. That is what your website feels like without a primary navigation menu. A nav menu is the signpost system of your site — it tells visitors where they are, where they can go, and how to get back. Without one, people are guessing, and guessing visitors are leaving visitors.

Why it matters

For your visitors: They land on your page and immediately have to play detective. Where is the pricing? How do I contact someone? Is there a blog? Without visible navigation, every visit becomes a scavenger hunt that nobody signed up for. Most people will not hunt — they will leave within seconds.
For your business: No navigation means higher bounce rates, fewer page views, and lost conversions. If someone cannot find your pricing page, they cannot buy. If they cannot find your docs, they cannot use your product. Navigation is not decoration — it is infrastructure.
The standard: WCAG 2.4.5 requires "more than one way to locate a page within a set of pages." A primary navigation menu is the most fundamental way to meet this. Every usability study since the 1990s has confirmed that visible, consistent navigation is the number one factor in whether people can actually use a website.

Clear navigation menu

<header>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
    <a href="/contact">Contact</a>
  </nav>
</header>
<main>
  <h1>Welcome to our app</h1>
</main>

No navigation at all

<body>
  <div class="hero">
    <h1>Welcome to our app</h1>
    <p>The best thing ever built.</p>
    <a href="/signup">Sign up</a>
  </div>
  <!-- ...where do I go from here? -->
</body>

How to fix it

React / Next.js

Create a navigation component and include it in your root layout so it appears on every page.

// src/components/nav.tsx
import Link from "next/link";

const links = [
  { href: "/", label: "Home" },
  { href: "/features", label: "Features" },
  { href: "/pricing", label: "Pricing" },
  { href: "/docs", label: "Docs" },
  { href: "/contact", label: "Contact" },
];

export function Nav() {
  return (
    <header className="sticky top-0 z-50 border-b bg-white dark:bg-gray-950">
      <nav aria-label="Main" className="mx-auto flex max-w-6xl items-center gap-6 px-4 py-3">
        <Link href="/" className="text-lg font-bold">
          YourApp
        </Link>
        {links.map((link) => (
          <Link
            key={link.href}
            href={link.href}
            className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
          >
            {link.label}
          </Link>
        ))}
      </nav>
    </header>
  );
}

// src/app/layout.tsx
import { Nav } from "@/components/nav";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Nav />
        <main>{children}</main>
      </body>
    </html>
  );
}

Plain HTML

<!-- Add this at the top of every page, inside <body> -->
<header>
  <nav aria-label="Main">
    <a href="/">Home</a>
    <a href="/features">Features</a>
    <a href="/pricing">Pricing</a>
    <a href="/docs">Docs</a>
    <a href="/contact">Contact</a>
  </nav>
</header>

<main>
  <!-- Your page content -->
</main>

The key details: use the <nav> element (not a plain <div>), give it aria-label="Main" so screen readers can identify it, and keep it consistent across every page. Visitors should never have to wonder how to get around.

High impact — navigation~2 paws

No navigation menu is like opening a restaurant with no menu. The cat does not visit twice.

How the cat scores this

The scanner looks for a <nav> element within the page. It checks that the nav contains multiple links (at least 2) and is positioned prominently — typically inside a <header> or near the top of the document. Pages with zero <nav> elements, or a nav with only a single link, get flagged. The cat also checks that navigation is consistent across pages — a nav on the homepage but nowhere else still counts as a problem.