<nav aria-label="Breadcrumb">
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/" itemprop="item"><span itemprop="name">Home</span></a>
      <meta itemprop="position" content="1" />
    </li>
    <span class="breadcrumb-sep" aria-hidden="true">›</span>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a href="/kategoriler" itemprop="item"><span itemprop="name">Kategoriler</span></a>
      <meta itemprop="position" content="2" />
    </li>
    <span class="breadcrumb-sep" aria-hidden="true">›</span>
    <li aria-current="page">UI Components</li>
  </ol>
</nav>

<style>
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; list-style: none; font-size: 0.875rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb-sep { color: var(--border); }
[aria-current="page"] { color: var(--accent); }
</style>