# Breadcrumb (Navigasyon) Yapısı

Breadcrumb (ekmek kırıntısı), kullanıcının site içindeki konumunu gösterir. TYPO3'te MenuProcessor ile oluşturulur.

---

## TypoScript Yapılandırması

### DataProcessing ile Breadcrumb

`Configuration/Sets/MySitePackage/setup.typoscript`:

```typoscript
page.10.dataProcessing {
    # Breadcrumb menüsü
    30 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
    30 {
        special = rootline
        special.range = 0|-1
        includeNotInMenu = 0
        as = breadcrumb
    }
}
```

### Parametre Açıklamaları

| Parametre | Değer | Açıklama |
|-----------|-------|----------|
| `special` | `rootline` | Kök sayfadan mevcut sayfaya kadar yol |
| `special.range` | `0\|-1` | 0 = root'tan başla, -1 = mevcut sayfaya kadar |
| `includeNotInMenu` | `0` | Menüde gizli sayfaları dahil etme |
| `as` | `breadcrumb` | Fluid'de kullanılacak değişken adı |

---

## Fluid Partial

### Basit Breadcrumb

`Resources/Private/Partials/Navigation/Breadcrumb.html`:

```html
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:if condition="{breadcrumb}">
    <nav aria-label="Breadcrumb" class="breadcrumb-nav py-3">
        <div class="container mx-auto px-4">
            <ol class="flex items-center space-x-2 text-sm text-gray-600">
                <f:for each="{breadcrumb}" as="item" iteration="iterator">
                    <li class="flex items-center">
                        <f:if condition="{iterator.isLast}">
                            <f:then>
                                <span class="text-gray-900 font-medium" aria-current="page">
                                    {item.title}
                                </span>
                            </f:then>
                            <f:else>
                                <a href="{item.link}" class="hover:text-primary transition-colors">
                                    <f:if condition="{iterator.isFirst}">
                                        <f:then>
                                            <!-- Ana Sayfa ikonu -->
                                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
                                            </svg>
                                        </f:then>
                                        <f:else>
                                            {item.title}
                                        </f:else>
                                    </f:if>
                                </a>
                                <span class="mx-2 text-gray-400">/</span>
                            </f:else>
                        </f:if>
                    </li>
                </f:for>
            </ol>
        </div>
    </nav>
</f:if>

</html>
```

### Breadcrumb'ı Layout'a Ekle

`Resources/Private/Layouts/Default.html`:

```html
<f:render partial="Header/Main" arguments="{mainMenu: mainMenu}" />

<!-- Breadcrumb -->
<f:render partial="Navigation/Breadcrumb" arguments="{breadcrumb: breadcrumb}" />

<main>
    <f:render section="Main" />
</main>

<f:render partial="Footer/Main" />
```

---

## Schema.org Yapısal Veri

SEO için breadcrumb'a yapısal veri (structured data) ekleyin:

```html
<f:if condition="{breadcrumb}">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            <f:for each="{breadcrumb}" as="item" iteration="iterator">
            {
                "@type": "ListItem",
                "position": {iterator.cycle},
                "name": "{item.title}",
                "item": "{item.link}"
            }<f:if condition="!{iterator.isLast}">,</f:if>
            </f:for>
        ]
    }
    </script>
</f:if>
```

---

## CSS Stilleri

```css
/* Breadcrumb stilleri */
.breadcrumb-nav {
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb-nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.breadcrumb-nav li {
    display: flex;
    align-items: center;
}

.breadcrumb-nav a {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: #0d6efd;
}

.breadcrumb-nav [aria-current="page"] {
    color: #212529;
    font-weight: 500;
}
```

---

## Belirli Sayfalarda Gizleme

Breadcrumb'ı ana sayfada gizlemek için:

```html
<f:if condition="{breadcrumb -> f:count()} > 1">
    <f:render partial="Navigation/Breadcrumb" arguments="{breadcrumb: breadcrumb}" />
</f:if>
```

---

## Kaynaklar

- [TYPO3 MenuProcessor](https://docs.typo3.org/m/typo3/reference-coreapi/main/en-us/ApiOverview/ContentElements/)
- [Schema.org BreadcrumbList](https://schema.org/BreadcrumbList)
