Missing Breadcrumbs

Your visitors are lost in your site with no trail to follow. Like Hansel and Gretel without the bread crumbs — except no witch, just a bounce.

What is this?

Remember Hansel and Gretel? They dropped bread crumbs so they could find their way back through the forest. Breadcrumbs on a website do exactly the same thing — they show visitors the path from the homepage to wherever they currently are, with clickable links at every level. Something like: Home > Products > Running Shoes > Air Zoom. Without them, your visitors are wandering through your site forest with no idea how they got here or how to get back.

Why it matters

For your visitors: When someone lands on a deep page (from Google, a shared link, or their own clicking), they need context. Where am I in this site? What category does this belong to? How do I go up one level? Without breadcrumbs, the only options are the back button (unreliable) or starting over from the homepage (annoying). Neither inspires confidence.
For your business: Breadcrumbs reduce bounce rates on deep pages by 10-30% according to Baymard Institute research. They also increase pages-per-session because visitors discover parent categories they did not know existed. Google also displays breadcrumbs in search results, making your listing more clickable and informative.
The standard: WCAG 2.4.8 recommends breadcrumbs as a way to help users understand their location within a site. Google's structured data guidelines specifically support breadcrumb markup via JSON-LD, which enhances your search result appearance.

Clear breadcrumb trail

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/docs">Docs</a></li>
    <li><a href="/docs/navigation">Navigation</a></li>
    <li aria-current="page">Missing Breadcrumbs</li>
  </ol>
</nav>

No breadcrumbs on a deep page

<!-- User lands here from Google. Where are they? -->
<main>
  <h1>Missing Breadcrumbs</h1>
  <p>Content about breadcrumbs...</p>
  <!-- No context. No way up. Just vibes. -->
</main>

How to fix it

React / Next.js

Build a reusable breadcrumb component that reads the URL path and generates the trail.

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

interface BreadcrumbItem {
  label: string;
  href: string;
}

export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Breadcrumb" className="mb-6 text-sm text-gray-500">
      <ol className="flex items-center gap-1.5">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={item.href} className="flex items-center gap-1.5">
              {index > 0 && <span aria-hidden="true">/</span>}
              {isLast ? (
                <span aria-current="page" className="text-gray-900 dark:text-white">
                  {item.label}
                </span>
              ) : (
                <Link href={item.href} className="hover:text-gray-900 dark:hover:text-white">
                  {item.label}
                </Link>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

Use it on any page:

// src/app/docs/navigation/page.tsx
import { Breadcrumbs } from "@/components/breadcrumbs";

export default function NavigationPage() {
  return (
    <>
      <Breadcrumbs
        items={[
          { label: "Home", href: "/" },
          { label: "Docs", href: "/docs" },
          { label: "Navigation", href: "/docs/navigation" },
        ]}
      />
      <h1>Navigation Guide</h1>
    </>
  );
}

Plain HTML

<!-- Place above your main content heading -->
<nav aria-label="Breadcrumb">
  <ol style="display: flex; gap: 0.5rem; list-style: none; padding: 0; font-size: 0.875rem;">
    <li><a href="/">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="/docs">Docs</a></li>
    <li aria-hidden="true">/</li>
    <li aria-current="page">Navigation</li>
  </ol>
</nav>

<!-- Bonus: add structured data for Google -->
<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://yoursite.com/" },
      { "@type": "ListItem", "position": 2, "name": "Docs", "item": "https://yoursite.com/docs" },
      { "@type": "ListItem", "position": 3, "name": "Navigation" }
    ]
  }
</script>

Key details: use <nav aria-label="Breadcrumb"> so screen readers identify it, use an <ol> (the order matters), and mark the current page with aria-current="page". The last item should be plain text, not a link — you are already here.

Medium impact — navigation~1 paw

Breadcrumbs are especially critical on sites with more than a few pages. The cat always knows where it has been. Your visitors should too.

How the cat scores this

The scanner checks for a <nav> element with an aria-label containing "breadcrumb" (case-insensitive), or an <ol> with structured breadcrumb-like links. It is most impactful on sites with nested content — a single-page site without breadcrumbs will not be penalized as heavily. The cat also looks for JSON-LD BreadcrumbList structured data and gives bonus points when both visual and structured breadcrumbs are present.