> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/styling/elemente/breadcrumbs.md).

# Breadcrumbs

Breadcrumbs sind eine sekundäre Navigation, bei welcher der zurückgelegte Pfad von der Startseite bis zur aktuellen Seite dargestellt wird. Es zeigt die Ebenentiefe an, in welcher man sich befindet.

### 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

**Breadcrumbs anzeigen (1)** aktiviert oder deaktiviert die Breadcrumbs-Navigation für alle Seiten in Deinem Shop.

{% hint style="warning" %}
Das Deaktivieren hat keinen Einfluss auf manuell platzierte Breadcrumbs in den Erlebniswelten.
{% endhint %}

Neben der **Ausrichtung (5)** der Breadcrumbs können diese auch optisch auf die **volle Breite (6)** gesetzt werden. Die Breadcrumbs dehnen sich dann je nach gewähltem [Grundlayout](/settings/grundeinstellungen.md) 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 (7)** stellt einen Startseiten-Link als erstes Element den Breadcrumbs voran. Zusätzlich kann ein einleitender **Text 'Du bist hier' (8)** angezeigt werden. Der text wurde als Textbaustein implementiert und kann in den Textbausteinen der Administration geändert werden.

Die Felder **Oberer Abstand (9)** und **Unterer Abstand (10)** 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%2F90yW6564rY3BzNiocBew%2Fdocs-de-config-elements-breadcrumbs-basic-configuration.webp?alt=media\&token=02027f82-d158-451b-a58a-25a04c046102)

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](/content/kategorie/kategoriebild.md#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)