# Breadcrumb

### Übersicht

Die [Breadcrumb](https://docs.atloss.de/en/academy/technical-terms/breadcrumb) ist ein grundlegendes Navigationselement auf deinen [Kategorie](https://docs.atloss.de/en/academy/technical-terms/category-page)- und [Produkt Detailseiten](https://docs.atloss.de/en/academy/technical-terms/product-detail-page). So kann sie einerseits über die nachfolgenden Konfigurationsfelder weiter personalisiert werden. Andererseits kann man sie jedoch auch über das [Breadcrumb Feature](https://docs.atloss.de/en/included-extensions/breadcrumb) des Themes seitenspezifisch verschieben oder auch komplett deaktivieren.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/xVnRiTbzHpdWhud3eicL/erlebniswelten-breadcrumb.webp" alt=""><figcaption><p>Breadcrumb unseres Kunden <a href="https://safe-t.ch/">https://safe-t.ch/</a></p></figcaption></figure>

{% hint style="success" %}
Ein Breadcrumb Element ist aktiv, sofern die entsprechende Kategorie oder ein mit ihr verknüpftes Produkt geöffnet wurde. Das aktive Element ist hierbei immer das letzte innerhalb der Breadcrumb.&#x20;
{% endhint %}

### Typografie

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/r6E9mRkRrOTG0b6dRica/erlebniswelten-breadcrumb-typografie.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftgröße der Elemente (in px)</summary>

Definiert die Schriftgröße der einzelnen Breadcrumb Elemente.

</details>

<details>

<summary>Icon Größe (in px)</summary>

Lege die Größe der ">" [Icons](https://docs.atloss.de/en/academy/technical-terms/icon) zwischen den Breadcrumb Elementen fest.

</details>

<details>

<summary>Schriftstärke der Elemente</summary>

Definiere die Schriftstärke der Breadcrumb Elemente. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

<details>

<summary>Schriftstärke des aktiven Elements</summary>

Lege die Schriftstärke des aktiven Breadcrumb Elements fest. Je nach [Schriftart](https://docs.atloss.de/en/theme-configuration/general/typography) stehen dir hierbei folgende Konfigurationsoptionen zur Verfügung:

100 = Thin\
200 = Extra Light\
300 = Light\
400 = Normal\
500 = Medium\
600 = Semi Bold\
700 = Bold\
800 = Extra Bold\
900 = Black

</details>

### Abstände

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/gre5FRoq5T0ReswJfKzT/erlebniswelten-breadcrumb-abstaende.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Linker &#x26; rechter Icon Abstand (in px)</summary>

Hinterlege den linken und rechten Abstand zwischen den ">" [Icons](https://docs.atloss.de/en/academy/technical-terms/icon).

</details>

### Farben

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/ZnLuTXl0DgpI5sqijWMn/erlebniswelten-breadcrumb-farben.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Schriftfarbe der Elemente</summary>

Passt die Schriftfarbe der Breadcrumb Elemente an. Standardmäßig wird hier die globale [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) mittels [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) verknüpft.

</details>

<details>

<summary>Schriftfarbe des aktiven Elements</summary>

Legt die Schriftfarbe des aktiven Breadcrumb Elements fest. Standardmäßig wird hier die globale [Textfarbe](https://docs.atloss.de/en/general/typography#textfarbe) mittels [Variable](https://docs.atloss.de/en/academy/technical-terms/variable) verknüpft.

</details>

<details>

<summary>Hintergrund der Elemente</summary>

Definiere die Hintergrundfarbe der Breadcrumb Elemente. Solltest du keine Hintergrundfarbe wollen, kannst du an dieser Stelle "transparent" in das Feld eintragen.

</details>

<details>

<summary>Hintergrund des aktiven Elements</summary>

Definiere die Hintergrundfarbe des aktiven Breadcrumb Elements. Solltest du keine Hintergrundfarbe wollen, kannst du an dieser Stelle "transparent" in das Feld eintragen.

</details>
