# Breadcrumbs

### Farben

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-78165999269add38a01f5e99962bb6efd29eef87%2Fdocs-de-config-theme-elements-breadcrumbs-colors.png?alt=media" alt=""><figcaption></figcaption></figure>

### Grundeinstellungen

Neben der **Ausrichtung (4)** der Breadcrumbs können diese auch optisch auf die **volle Breite (5)** gesetzt werden. Die Breadcrumbs dehnen sich dann je nach gewähltem [Grundlayout](https://themedocs.zenit.design/settings/grundeinstellungen) des Shops bis zum Browserrand aus. (In den Layout-Modi `Full-Width-Boxed` und `Boxed`, sowie `Full-Width-Header` dehnt sich die Hintergrundfarbe bis an den Browserrand aus - nicht aber der Inhalt.)

Die Option **Startseite anzeigen (6)** stellt einen Startseiten-Link als erstes Element den Breadcrumbs voran. Zusätzlich kann ein einleitender **Text 'Du bist hier' (7)** angezeigt werden. Der text wurde als Textbaustein implementiert und kann in den Textbausteinen der Administration geändert werden.

Die Felder **Oberer Abstand (8)** und **Unterer Abstand (9)** definieren den Abstand der Breadcrumbs zum Header sowie zum weiteren Content der Seite.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F9VDPWUkfelLmbmok3fSD%2Fdocs-de-config-elements-breadcrumbs-basic-configuration.png?alt=media\&token=9a5be32f-cf2c-4c24-b46a-e3c1953a64db)

Beispiel:

![Breadcrumbs mit Hintergrundfarbe nicht volle Breite](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-1229587a39d2dcc602839a1a100c8196189496ce%2Fdocs-front-elemente-pagination-breadcrumbs.jpg?alt=media)

![Breadcrumbs mit Hintergrundfarbe auf voller Breite (2)](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-68a7f1bc602adca46564ab3c05c7022db131364e%2Fdocs-theme-elemente-breadcrumbs-example.png?alt=media)

{% hint style="success" %}
Wie Du Breadcrumbs in das Kategorie-Bild setzen kannst, erfährst Du im Bereich [Kategoriebild Headerbereich](https://themedocs.zenit.design/content/kategorie/kategoriebild#erlebniswelt-konfigurieren).
{% endhint %}

![Breadcrumbs im Kategorie-Bild](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-93a2961b9f14d4beb3501febae83595e7eae2547%2Fdocs-front-elemente-pagination-breadcrumbs-2.png?alt=media)