NavBreadcrumb Navigation

---
/**
 * NavBreadcrumb
 * Breadcrumb + simpele navigatiebalk combinatie. Goed voor content-sites.
 */
interface Props {
  logo: string;
  links: { label: string; href: string }[];
  breadcrumbs: { label: string; href?: string }[];
}
const { logo, links, breadcrumbs } = Astro.props;
---
<div class="nb">
  <header class="nb-nav">
    <div class="nb-nav-inner">
      <a href="/" class="nb-logo">{logo}</a>
      <ul class="nb-links">
        {links.map(l => <li><a href={l.href} class="nb-link">{l.label}</a></li>)}
      </ul>
    </div>
  </header>
  <nav class="nb-bread" aria-label="Breadcrumb">
    <div class="nb-bread-inner">
      <ol class="nb-crumbs">
        {breadcrumbs.map((b, i) => (
          <li class="nb-crumb">
            {b.href ? <a href={b.href} class="nb-crumb-link">{b.label}</a> : <span class="nb-crumb-current">{b.label}</span>}
            {i < breadcrumbs.length - 1 && <span class="nb-sep">/</span>}
          </li>
        ))}
      </ol>
    </div>
  </nav>
</div>
<style>
  .nb-nav { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100; }
  .nb-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; height: 56px; gap: 2rem; }
  .nb-logo { font-weight: 800; font-size: 1rem; color: #0a0a0a; text-decoration: none; letter-spacing: -0.02em; }
  .nb-links { list-style: none; padding: 0; margin: 0; display: flex; flex: 1; gap: 0; }
  .nb-link { display: block; font-size: 0.8125rem; font-weight: 500; color: #6b7280; text-decoration: none; padding: 0.3rem 0.75rem; border-radius: 0.375rem; transition: all 0.15s; }
  .nb-link:hover { color: var(--color-accent,#6366f1); background: rgba(99,102,241,0.07); }
  .nb-bread { background: #f8fafc; border-bottom: 1px solid #f1f5f9; }
  .nb-bread-inner { max-width: 1280px; margin: 0 auto; padding: 0.5rem 2rem; }
  .nb-crumbs { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
  .nb-crumb { display: flex; align-items: center; gap: 0.375rem; }
  .nb-crumb-link { font-size: 0.8125rem; color: #6b7280; text-decoration: none; transition: color 0.15s; }
  .nb-crumb-link:hover { color: var(--color-accent,#6366f1); }
  .nb-crumb-current { font-size: 0.8125rem; font-weight: 500; color: #0a0a0a; }
  .nb-sep { font-size: 0.8125rem; color: #d1d5db; }
</style>