Build an Accessible, Dynamic React Breadcrumb Component (React Router v6 + Next.js)

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/shoes">Shoes</a></li>
    <li aria-current="page">Trail Runners</li>
  </ol>
</nav>

import React from 'react';

type Crumb = { label: React.ReactNode; href?: string };

type BreadcrumbsProps = {
  items: Crumb[];
  ariaLabel?: string;
  separator?: React.ReactNode;
  maxItems?: number; // e.g., 4 keeps first + last two + current
  className?: string;
  structuredData?: boolean;
};

export function Breadcrumbs({
  items,
  ariaLabel = 'Breadcrumb',
  separator = '/',
  maxItems = Infinity,
  className,
  structuredData = false,
}: BreadcrumbsProps) {
  const trail = React.useMemo(() => {
    if (items.length <= maxItems) return items;
    // Collapse middle: keep first, last two, and current
    const first = items[0];
    const lastThree = items.slice(-3);
    return [first, { label: '…' }, ...lastThree];
  }, [items, maxItems]);

  const jsonLd = React.useMemo(() => {
    if (!structuredData) return null;
    const serializable = items.every(
      (c) => typeof c.label === 'string' && typeof c.href === 'string'
    );
    if (!serializable) return null;
    const data = {
      '@context': 'https://schema.org',
      '@type': 'BreadcrumbList',
      itemListElement: items.map((c, i) => ({
        '@type': 'ListItem',
        position: i + 1,
        name: c.label as string,
        item: c.href as string,
      })),
    };
    return (
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
      />
    );
  }, [items, structuredData]);

  return (
    <nav aria-label={ariaLabel} className={className}>
      <ol className="rb-ol">
        {trail.map((crumb, i) => {
          const isLast = i === trail.length - 1;
          const isEllipsis = crumb.label === '…' && !('href' in crumb);

          return (
            <li key={i} className="rb-li">
              {isEllipsis ? (
                <span className="rb-ellipsis" aria-hidden="true">…</span>
              ) : isLast || !crumb.href ? (
                <span aria-current={isLast ? 'page' : undefined} className="rb-current">{crumb.label}</span>
              ) : (
                <a href={crumb.href} className="rb-link">{crumb.label}</a>
              )}
              {!isLast && !isEllipsis && (
                <span className="rb-sep" aria-hidden="true">{separator}</span>
              )}
            </li>
          );
        })}
      </ol>
      {jsonLd}
    </nav>
  );
}

.rb-ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.rb-li { display: inline-flex; align-items: center; }
.rb-link { color: var(--rb-link, #2563eb); text-decoration: none; }
.rb-link:hover { text-decoration: underline; }
.rb-current { color: var(--rb-current, #111827); font-weight: 500; }
.rb-sep { margin: 0 .25rem; color: var(--rb-sep, #6b7280); }
.rb-ellipsis { color: var(--rb-sep, #6b7280); }

// routes.tsx
import { createBrowserRouter } from 'react-router-dom';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <RootLayout />,
    handle: { breadcrumb: 'Home' },
    children: [
      {
        path: 'products',
        element: <ProductsPage />,
        handle: { breadcrumb: 'Products' },
        children: [
          {
            path: ':id',
            loader: async ({ params }) => fetch(`/api/products/${params.id}`).then(r => r.json()),
            element: <ProductPage />,
            handle: {
              breadcrumb: (data: { name: string }) => data.name,
            },
          },
        ],
      },
    ],
  },
]);

// BreadcrumbFromRouter.tsx
import { useMatches, Link } from 'react-router-dom';
import { Breadcrumbs } from './Breadcrumbs';

export function BreadcrumbFromRouter() {
  const matches = useMatches();

  const items = matches
    .filter((m) => m.handle && 'breadcrumb' in m.handle)
    .map((m) => {
      const bc = (m.handle as any).breadcrumb;
      const label = typeof bc === 'function' ? bc(m.data) : bc;
      const href = m.pathname; // full matched pathname for the route
      return { label, href };
    });

  // Make the last item non-link for a11y
  if (items.length) items[items.length - 1].href = undefined;

  return <Breadcrumbs items={items} structuredData />;
}

// app/components/BreadcrumbFromNext.tsx
'use client';
import React from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
import { Breadcrumbs } from './Breadcrumbs';

const LABELS: Record<string, string> = {
  '': 'Home',
  products: 'Products',
  shoes: 'Shoes',
};

export function BreadcrumbFromNext({ currentLabel }: { currentLabel?: string }) {
  const pathname = usePathname(); // e.g., /products/shoes/trail-runners
  const segments = React.useMemo(() => pathname.split('/').filter(Boolean), [pathname]);

  const items = [{ label: 'Home', href: '/' }];
  let hrefAcc = '';
  for (let i = 0; i < segments.length; i++) {
    hrefAcc += `/${segments[i]}`;
    const isLast = i === segments.length - 1;
    const label = isLast && currentLabel ? currentLabel : (LABELS[segments[i]] ?? decodeURIComponent(segments[i]));
    items.push({ label, href: isLast ? undefined : hrefAcc });
  }

  return <Breadcrumbs items={items} structuredData />;
}

import { render, screen } from '@testing-library/react';
import { axe } from 'jest-axe';
import { Breadcrumbs } from './Breadcrumbs';

test('announces current page and has no a11y violations', async () => {
  const { container } = render(
    <Breadcrumbs
      items={[
        { label: 'Home', href: '/' },
        { label: 'Products', href: '/products' },
        { label: 'Trail Runners' },
      ]}
    />
  );

  expect(screen.getByText('Trail Runners')).toHaveAttribute('aria-current', 'page');
  expect(await axe(container)).toHaveNoViolations();
});