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

***

### Breadcrumb anzeigen (Produktseite)

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen

**Beispiel Wert**:\
`anzeigen`

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

**Technischer Name**:\
`twt-breadcrumb-show-product-detail`

{% hint style="info" %}
Deprecated: Diese Konfiguration ist veraltet und wird mit einem kommenden Update entfernt.
{% endhint %}

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

## Typografie

***

### Links unterstreichen

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`nein`

**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**: 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"

**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"

**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"

**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"

**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"

**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"

**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"

**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"

**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 "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 "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 "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 "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 mit Hintergrundfarbe""

**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 mit Hintergrundfarbe""

**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 mit Hintergrundfarbe""

**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 %}

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

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

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

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

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

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

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

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

***

### Rahmenfarbe @active

**Feldtyp**:\
Farbauswahl

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

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

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

***

### Hintergrundfarbe @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ffffff`

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/handbuch/inhalt/breadcrumb/konfiguration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.