Breadcrumb Navigation Implementation with Claude Code

Breadcrumbs Improve UX and SEO Simultaneously

Breadcrumbs are a navigation element that visually indicate where users are within your site. Implementing them correctly improves both usability and SEO at the same time.

A Basic Breadcrumb Component

> Create a breadcrumb component.
> Include structured data (JSON-LD), accessibility, and responsive behavior.

// components/Breadcrumb.tsx
interface BreadcrumbItem {
  label: string;
  href?: string;
}

interface BreadcrumbProps {
  items: BreadcrumbItem[];
}

export function Breadcrumb({ items }: BreadcrumbProps) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.label,
      item: item.href ? `https://example.com${item.href}` : undefined,
    })),
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <nav aria-label="Breadcrumb" className="breadcrumb">
        <ol className="flex flex-wrap items-center gap-1 text-sm text-gray-600">
          {items.map((item, index) => (
            <li key={index} className="flex items-center">
              {index > 0 && (
                <span className="mx-2 text-gray-400" aria-hidden="true">/</span>
              )}
              {item.href && index < items.length - 1 ? (
                <a
                  href={item.href}
                  className="text-blue-600 hover:underline"
                >
                  {item.label}
                </a>
              ) : (
                <span aria-current="page" className="text-gray-800 font-medium">
                  {item.label}
                </span>
              )}
            </li>
          ))}
        </ol>
      </nav>
    </>
  );
}

Automatically Generating Breadcrumbs From the URL

// utils/breadcrumb.ts
const labelMap: Record<string, string> = {
  blog: 'Blog',
  category: 'Category',
  tags: 'Tags',
  about: 'About',
};

export function generateBreadcrumbs(pathname: string): BreadcrumbItem[] {
  const segments = pathname.split('/').filter(Boolean);

  const items: BreadcrumbItem[] = [
    { label: 'Home', href: '/' },
  ];

  let currentPath = '';
  segments.forEach((segment, index) => {
    currentPath += `/${segment}`;
    const isLast = index === segments.length - 1;

    items.push({
      label: labelMap[segment] || decodeURIComponent(segment),
      href: isLast ? undefined : currentPath,
    });
  });

  return items;
}

Integration Example in Astro

---
// layouts/BlogPost.astro
import { Breadcrumb } from '../components/Breadcrumb';

const { frontmatter } = Astro.props;
const breadcrumbItems = [
  { label: 'Home', href: '/' },
  { label: 'Blog', href: '/blog' },
  { label: frontmatter.category, href: `/blog/category/${frontmatter.category}` },
  { label: frontmatter.title },
];
---

<Breadcrumb items={breadcrumbItems} />

Styling Variations

/* Arrow style */
.breadcrumb-arrow li + li::before {
  content: '›';
  margin: 0 0.5rem;
  color: #9ca3af;
}

/* Icon style */
.breadcrumb-icon li:first-child a::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url('/icons/home.svg') no-repeat center;
  margin-right: 4px;
  vertical-align: middle;
}

/* Mobile: show only the last two items */
@media (max-width: 640px) {
  .breadcrumb li:not(:nth-last-child(-n+2)) {
    display: none;
  }
  .breadcrumb li:nth-last-child(2)::before {
    content: '... / ';
  }
}

Tests

import { describe, it, expect } from 'vitest';
import { generateBreadcrumbs } from './breadcrumb';

describe('generateBreadcrumbs', () => {
  it('home page', () => {
    const result = generateBreadcrumbs('/');
    expect(result).toEqual([{ label: 'Home', href: '/' }]);
  });

  it('blog article page', () => {
    const result = generateBreadcrumbs('/blog/my-article');
    expect(result).toHaveLength(3);
    expect(result[1]).toEqual({ label: 'Blog', href: '/blog' });
    expect(result[2].href).toBeUndefined();
  });
});

Summary

Breadcrumbs are an important component on both the SEO and accessibility fronts. If you ask Claude Code to include structured data support in the implementation, your breadcrumbs will start showing up in Google search results. For the details on structured data, see Google Search Central.