> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/handbuch/inhalt/breadcrumb/konfiguration.md).

# 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 übersetzten, 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 %}