Breadcrumb Trail Generator

<nav aria-label="Breadcrumb" class="breadcrumb">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item">
      <a href="/" class="breadcrumb__link breadcrumb__link--home">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="breadcrumb__icon">
          <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
          <polyline points="9 22 9 12 15 12 15 22" />
        </svg>
        <span class="sr-only">Home</span>
      </a>
      <span class="breadcrumb__separator" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </span>
    </li>
    <li class="breadcrumb__item">
      <a href="/products" class="breadcrumb__link">Products</a>
      <span class="breadcrumb__separator" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </span>
    </li>
    <li class="breadcrumb__item">
      <a href="/products/electronics" class="breadcrumb__link">Electronics</a>
      <span class="breadcrumb__separator" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M9 18l6-6-6-6" />
        </svg>
      </span>
    </li>
    <li class="breadcrumb__item breadcrumb__item--current">
      <span aria-current="page">Laptops</span>
    </li>
  </ol>
</nav>

<!-- Schema.org JSON-LD -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Products",
      "item": "https://example.com/products"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Electronics",
      "item": "https://example.com/products/electronics"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Laptops"
    }
  ]
}
</script>

.breadcrumb {
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.breadcrumb__link {
  color: #6366f1;
  text-decoration: none;
  transition: all 0.2s ease;
}

.breadcrumb__link:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.breadcrumb__link--home {
  display: flex;
  align-items: center;
}

.breadcrumb__icon {
  width: 16px;
  height: 16px;
}

.breadcrumb__separator {
  display: flex;
  align-items: center;
  color: #9ca3af;
}

.breadcrumb__separator svg {
  width: 14px;
  height: 14px;
}

.breadcrumb__item--current span {
  color: #374151;
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

const Breadcrumb = ({ items }) => {
  const getSeparator = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
      <path d="M9 18l6-6-6-6" />
    </svg>
  );

  const listStyle = {
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
    gap: 8,
    listStyle: 'none',
    margin: 0,
    padding: 0,
  };

  const linkStyle = {
    color: '#6366f1',
    textDecoration: 'none',
    fontSize: 14,
  };

  const currentStyle = {
    color: '#374151',
    fontWeight: 500,
    fontSize: 14,
  };

  return (
    <nav aria-label="Breadcrumb">
      <ol style={listStyle}>
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li key={index} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              {isLast ? (
                <span style={currentStyle} aria-current="page">{item.label}</span>
              ) : (
                <>
                  <a href={item.href} style={linkStyle}>{item.label}</a>
                  <span style={{ color: '#9ca3af', display: 'flex' }} aria-hidden="true">
                    {getSeparator()}
                  </span>
                </>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  );
};

export default Breadcrumb;

// Usage:
// <Breadcrumb items={[
//   { label: 'Home', href: '/' },
//   { label: 'Products', href: '/products' },
//   { label: 'Current Page', href: '/products/current' }
// ]} />