<!-- Quelle: https://service.themeware.design/doku/handbuch/inhalt/breadcrumb/konfiguration
     Alle Seiten dieser Sammlung: https://service.themeware.design/doku/llms.txt -->

# Konfiguration

***

### Breadcrumb anzeigen (Startseite)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (Standard)

**Beispiel Wert**:\
`nicht anzeigen`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb"

**Technischer Name**:\
`twt-breadcrumb-show-home`


***

### Breadcrumb anzeigen (CMS-Shopseiten)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (Standard)

**Beispiel Wert**:\
`anzeigen (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb"

**Technischer Name**:\
`twt-breadcrumb-show-cms-shop-pages`


***

### Breadcrumb anzeigen (CMS-Landingpages)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (Standard)

**Beispiel Wert**:\
`anzeigen (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb"

**Technischer Name**:\
`twt-breadcrumb-show-cms-landing-pages`


***

### Breadcrumb anzeigen (CMS-Kategorieseiten)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (Standard)

**Beispiel Wert**:\
`anzeigen (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb"

**Technischer Name**:\
`twt-breadcrumb-show-cms-category-pages`


***

### Breadcrumb anzeigen (CMS-Produktseite)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (Standard)

**Beispiel Wert**:\
`anzeigen (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb"

**Technischer Name**:\
`twt-breadcrumb-show-cms-product-pages`


a## Basiskonfiguration

***

### Darstellungsart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Links (Standard)\
• Links mit Hintergrundfarbe\
• Buttons

**Beispiel Wert**:\
`Links (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-breadcrumb-style`

{% hint style="info" %}
**Links**\
 Links und Trennzeichen. 

**Links mit Hintergrundfarbe**\
 Links und Trennzeichen mit einem farbigen Hintergrund. 

**Buttons**\
 Links als Buttons, ohne Trennzeichen.
{% endhint %}


***

### Darstellungsart (Trennzeichen)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Chevron (Standard)\
• Doppel-Chevron\
• Pfeil\
• Schrägstrich\
• Punkt\
• senkrechter Strich\
• Bindestrich

**Beispiel Wert**:\
`Chevron (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-breadcrumb-separator-style`


***

### Zusatzinformationen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen (Standard)\
• Home-Icon anzeigen\
• Home-Link anzeigen\
• Text anzeigen ("Sie sind hier:")\
• Text und Home-Icon anzeigen\
• Text und Home-Link anzeigen

**Beispiel Wert**:\
`nicht anzeigen (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-breadcrumb-further-information`

{% hint style="info" %}
Um den Text "Sie sind hier:" zu bearbeiten oder übersetzen, nutze bitte den Textbaustein: twt.breadcrumb.furtherInformation 

Um den Text "Home-Link" zu bearbeiten nutze bitte den Textbaustein: general.homeLink
{% endhint %}


## Farbkonfiguration

***

### Textfarbe (Zusatzinformationen)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#444444`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-text-color`


***

### Linkfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#444444`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-link-color`


***

### Linkfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-link-active-color`


***

### Iconfarbe (Trennzeichen)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#444444`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-divider-color`


***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#bcc1c7`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-buttons-border-color`

{% hint style="info" %}
Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.
{% endhint %}


***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-buttons-background-color`

{% hint style="info" %}
Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.
{% endhint %}


***

### Rahmenfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-buttons-border-color-active`

{% hint style="info" %}
Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.
{% endhint %}


***

### Hintergrundfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`$sw-color-brand-primary`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-breadcrumb-buttons-background-color-active`

{% hint style="info" %}
Wird in der Standard-Breadcrumb verwendet. Die Hero-Section nutzt die Textfarbe des Elements.
{% endhint %}


## Typografie

***

### Links unterstreichen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein (Standard)\
• ja\
• nur @hover\
• nur im Ruhezustand

**Beispiel Wert**:\
`nein (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-breadcrumb-links-underline`

{% hint style="info" %}
Unterstreiche Breadcrumb-Links, damit klickbare Einträge von nicht-klickbaren strukturellen Seiten klar unterschieden werden und so die Barrierefreiheit verbessert wird.

**Hinweis**: Wirkt nur bei den Darstellungsarten "Links" und "Links in farbiger Box". Button-Stile sind nicht betroffen.

Diese Konfiguration kann durch die Barrierefreiheits-Konfiguration "Links unterstreichen" im Tab "Weiteres" => Bereich "Barrierefreiheit" => Abschnitt "Layout" überschrieben werden.
{% endhint %}


## Breadcrumb-Container

***

### Container-Styling

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• kein Container-Styling (Standard)\
• ThemeWare® CMS-Styling\
• Benutzerdefiniertes Container-Styling

**Beispiel Wert**:\
`kein Container-Styling (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-container-styling`


***

### Ecken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet\
• abgerundete Ecken (Standard)\
• runde Ecken

**Beispiel Wert**:\
`abgerundete Ecken (Standard)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-container-corner-type`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}


***

### Breite

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Beispiel Wert**:\
`Container-Max-Width (Full-width-boxed)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-width`

{% hint style="info" %}
Lege die Größenmodus der Breadcrumb-Container auf CMS-Seiten im Grundlayout "Full-width-boxed" fest.
{% endhint %}


***

### Außenabstand oben

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-margin-top`

{% hint style="info" %}
Lege den Außenabstand nach oben für den Breadcrumb-Container auf CMS-Seiten fest.
{% endhint %}


***

### Außenabstand unten

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`10`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-margin-bottom`

{% hint style="info" %}
Lege den Außenabstand nach unten für den Breadcrumb-Container auf CMS-Seiten fest.
{% endhint %}


***

### Innenabstand oben/unten

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-padding-top-bottom`

{% hint style="info" %}
Lege den Innenabstand nach oben/unten für den Breadcrumb-Container auf CMS-Seiten fest. 

Wenn du eine Hintergrundfarbe nutzt ist '15' ein sinnvoller Wert.
{% endhint %}


***

### Innenabstand links/rechts

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`1`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-padding-left-right`

{% hint style="info" %}
Lege den Innenabstand nach links/rechts für den Breadcrumb-Container auf CMS-Seiten fest. 

Wenn du eine Hintergrundfarbe nutzt ist '20' ein sinnvoller Wert.
{% endhint %}


***

### Inhalt ausrichten

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• zentriert ausrichten\
• rechts ausrichten

**Beispiel Wert**:\
`links ausrichten`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container (Shopware-Standard-Breadcrumb)"

**Technischer Name**:\
`twt-breadcrumb-justify-content`

{% hint style="info" %}
Wähle die gewünschte horizontale Ausrichtung aus. 

**links**\
Elemente werden am Anfang des Containers positioniert. 

**rechts**\
Elemente werden am Ende des Containers positioniert. 

**zentriert**\
Die Elemente befinden sich in der Mitte des Containers. 

**space-between**\
Elemente werden gleichmäßig verteilt. Das erste Element an den Start, das letzte an das Ende. 

**space-around**\
Elemente werden gleichmäßig verteilt. Alle Elemente haben gleiche Abstände um sie herum.
{% endhint %}


## Benutzerdefiniertes Container-Styling

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

**Technischer Name**:\
`twt-breadcrumb-border-color`

{% hint style="info" %}
Lege die Rahmenfarbe für den Breadcrumb-Container fest.
{% endhint %}


***

### Rahmenfarbe oben

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

**Technischer Name**:\
`twt-breadcrumb-border-top-color`

{% hint style="info" %}
Lege die Rahmenfarbe oben für den Breadcrumb-Container fest. 

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.
{% endhint %}


***

### Rahmenfarbe unten

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

**Technischer Name**:\
`twt-breadcrumb-border-bottom-color`

{% hint style="info" %}
Lege die Rahmenfarbe unten für den Breadcrumb-Container fest. 

Wird nur angewendet wenn dieser Farbwert von der Rahmenfarbe abweicht.
{% endhint %}


***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`rgba(0, 0, 0, 0)`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Breadcrumb-Container → Container-Styling: Benutzerdefiniertes Container-Styling"

**Technischer Name**:\
`twt-breadcrumb-background-color`

{% hint style="info" %}
Lege die Hintergrundfarbe für den Breadcrumb-Container fest.
{% endhint %}


## Darstellungsart "Links mit Hintergrundfarbe"

***

### Ecken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet\
• abgerundete Ecken\
• runde Ecken

**Beispiel Wert**:\
`abgerundete Ecken`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

**Technischer Name**:\
`twt-breadcrumb-list-corner-type`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}


***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#bcc1c7`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

**Technischer Name**:\
`twt-breadcrumb-border-color-list`

{% hint style="info" %}
Lege die Rahmenfarbe für den Breadcrumb fest. 

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.
{% endhint %}


***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eeeeee`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Links in farbiger Box"

**Technischer Name**:\
`twt-breadcrumb-background-color-list`

{% hint style="info" %}
Lege die Hintergrundfarbe für den Breadcrumb fest. 

Wird bei Darstellungsarten mit Hintergrundfarbe benutzt.
{% endhint %}


## Darstellungsart "Buttons"

***

### Trennzeichen anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`nein`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

**Technischer Name**:\
`twt-breadcrumb-buttons-separator-show`

{% hint style="info" %}
Wähle ob das Trennzeichen-Icon in der Breadcrumb angezeigt werden soll.
{% endhint %}


***

### Rahmen anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nein\
• ja

**Beispiel Wert**:\
`ja`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

**Technischer Name**:\
`twt-breadcrumb-buttons-border-show`

{% hint style="info" %}
Wähle ob ein Rahmen um die Buttons angezeigt werden soll.

Die Farbe vom Rahmen kannst du unten konfigurieren.
{% endhint %}


***

### Ecken

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht abgerundet\
• abgerundete Ecken\
• runde Ecken

**Beispiel Wert**:\
`abgerundete Ecken`

**Pfad zur Einstellung**:\
Tab "Inhalt" => Bereich "Breadcrumb" => Abschnitt "Darstellungsart: Buttons"

**Technischer Name**:\
`twt-breadcrumb-buttons-corner-type`

{% hint style="info" %}
**abgerundete Ecken**\
Verwendet die Konfiguration "Abgerundete Ecken". ("Layout" > "Layout" > "Abgerundete Ecken")

**runde Ecken**\
Verwendet einen vordefinierten Radius für runde Ecken.
{% endhint %}