---
title: "Breadcrumb"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Breadcrumb using semantic HTML for accessible, SEO-friendly navigation trails. Supports custom separators, icons, and responsive layouts."
url: https://frutjam.com/tr/components/breadcrumb
---

# Breadcrumb Component

 İçerik haritası bileşenleri gezinme hiyerarşisini gösterir ve kullanıcıların bir web sitesi içindeki konumlarını anlamalarına yardımcı olur. Erişilebilirlik için semantik HTML gezinme öğeleri ve ARIA yer işaretleri ile oluşturulan içerik haritaları, kullanıcıların ana bölümlere hızlı bir şekilde gitmesine olanak tanıyarak kullanılabilirliği artırır. Frutjam içerik haritası sistemi, ayırıcıları otomatik olarak işler ve esnek şekillendirme için özel ayırıcıları destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

| Sınıf                | Tip         | Tanım                                                        |
| -------------------- | ----------- | ------------------------------------------------------------ |
| breadcrumb           | Temel       | İçerik haritası yolu için navigasyon kapsayıcısı             |
| breadcrumb-list      | Değiştirici | Kırıntı öğelerinin sıralı listesi                            |
| breadcrumb-item      | Değiştirici | İçerik haritasındaki bireysel liste öğesi                    |
| breadcrumb-link      | Değiştirici | İçerik haritası bağlantısı olarak tasarlanmış bağlantı öğesi |
| breadcrumb-separator | Değiştirici | Öğeler arasındaki ayırıcı öğe                                |
| breadcrumb-current   | Değiştirici | Geçerli (etkin) sayfa öğesini işaretler                      |

## Temel Kullanım

Ayırıcı sağlanmazsa, kırıntı öğeleri arasında otomatik olarak bir ok gösterilir.

## Galeta Ayırıcıları

### Metin Ayırıcılı İçerik Kırıntısı

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>
```

### Simge Ayırıcılı İçerik Kırıntısı

```html
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>
```

## İçerik Haritası Erişilebilirliği

İçerik haritalarının ekran okuyucular tarafından erişilebilir olmasını sağlamak için:

- Yapıyı bir `<nav>` öğesine `aria-label="Breadcrumb"` ile sarın.
- Son öğe (geçerli sayfa) `aria-current="page"` kullanmalı ve tercihen bir bağlantı yerine `<span>` olmalıdır.
- Ayırıcılar ekran okuyucular tarafından göz ardı edilmelidir (genellikle CSS veya fiziksel bir öğe kullanılıyorsa `aria-hidden='true'` aracılığıyla işlenir).