Breadcrumb HTML Generator

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item"><a href="/blog">Blog</a></li>
    <li class="breadcrumb-separator" aria-hidden="true">/</li>
    <li class="breadcrumb-item active" aria-current="page">How to ship faster</li>
  </ol>
</nav>

<style>
  .breadcrumb { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.875rem; }
  .breadcrumb-item a { color: #4f46e5; text-decoration: none; }
  .breadcrumb-item a:hover { text-decoration: underline; }
  .breadcrumb-item.active { color: #64748b; }
  .breadcrumb-separator { color: #cbd5e1; }
</style>