# Konfiguration

***

### Top-Navigation

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• Liste anzeigen\
• Hamburger-Menü anzeigen

**Beispiel Wert**:\
`Liste anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation"

**Technischer Name**:\
`twt-nav-main-show`

## Basiskonfiguration

***

### Home-Link anzeigen

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`anzeigen`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-home-link-show`

***

### Home-Link

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text (Standard)\
• Icon

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-home-link`

***

### Pfeile anzeigen

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• nicht anzeigen\
• anzeigen (ThemeWare®-Stil)\
• anzeigen (Standard)

**Beispiel Wert**:\
`anzeigen (ThemeWare®-Stil)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-arrows-show`

{% hint style="info" %}
Zeigt einen Pfeil nach unten neben dem Menüpunkt, wenn Unterkategorien vorhanden sind.
{% endhint %}

***

### Hover-Effekt

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Standard\
• farbig hinterlegen (inkl. Home-Link)\
• farbig hinterlegen (exkl. Home-Link)\
• unterstreichen (mittig nach links und rechts)\
• unterstreichen (von links nach rechts)\
• unterstreichen (von rechts nach links)\
• unterstreichen

**Beispiel Wert**:\
`farbig hinterlegen (inkl. Home-Link)`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-hover-type`

{% hint style="info" %}
Bei einer links ausgerichteten Top-Navigation empfehlen wir den Hover-Effekt "farbig hinterlegen (exkl. Home-Link)" statt "farbig hinterlegen (inkl. Home-Link)".
{% endhint %}

***

### Höhe

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`60`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-height`

***

### Innenabstand (Menüpunkte)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`16`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-padding`

{% hint style="info" %}
Gebe den gewünschten Abstand für die Menüpunkte ein.
{% endhint %}

***

### Innenabstand unten

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-padding-bottom`

{% hint style="info" %}
Gebe den gewünschten Abstand nach unten für die Top-Navigation ein.
{% endhint %}

***

### Außenabstand links @Tablet (≥992px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-margin-left`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.
{% endhint %}

***

### Außenabstand rechts @Tablet (≥992px)

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`0`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basiskonfiguration"

**Technischer Name**:\
`twt-nav-main-margin-right`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration ist nur für das Grundlayout "boxed" verfügbar.
{% endhint %}

## Basis-Header "Header 1" and "Header 2"

***

### Breite

**Feldtyp**:\
Auswahlfeld

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

**Beispiel Wert**:\
`Standard`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Basis-Header "Header 1" and "Header 2""

**Technischer Name**:\
`twt-nav-main-width`

{% hint style="info" %}
Wähle den Größenmodus der "Top-Navigation" aus.

**Standard**: Die Breite der "Top-Navigation" orientiert sich an der Konfiguration der Breite des Headers.

**Hinweis**: Diese Konfiguration gilt nicht im Grundlayout "boxed".
{% endhint %}

## Farbkonfiguration

***

### Hintergrundfarbe (Navigation)

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-nav-main-background-color`

***

### Rahmenfarbe

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-nav-main-border-bottom-color`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für den Hover-Effekt "Standard".
{% endhint %}

***

### Rahmenfarbe (unterstreichen) @hover

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-nav-main-border-bottom-color-hover`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für den Hover-Effekt "unterstreichen".
{% endhint %}

***

### Rahmenfarbe (Trennstrich)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#cccccc`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Farbkonfiguration"

**Technischer Name**:\
`twt-nav-main-border`

## Typografie

***

### Schriftart

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• Text\
• Überschriften

**Beispiel Wert**:\
`Text`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-font-family`

***

### Schriftgröße

**Feldtyp**:\
Nummernfeld

**Beispiel Wert**:\
`18`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-font-size`

***

### Strichstärke

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`bold`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-font-weight`

***

### Strichstärke @active

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• light\
• normal\
• bold

**Beispiel Wert**:\
`bold`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-font-weight-active`

***

### Textausrichtung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• links ausrichten\
• rechts ausrichten\
• zentriert ausrichten\
• space-between\
• space-around

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-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 %}

***

### Textformatierung

**Feldtyp**:\
Auswahlfeld

**Verfügbare Werte**:\
• keine\
• Großschreibung\
• Kleinschreibung\
• Wortanfang in Großbuchstaben

**Beispiel Wert**:\
`keine`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Typografie"

**Technischer Name**:\
`twt-nav-main-text-transform`

## Menüpunkt (Home-Link)

***

### Farbe (Home-Link)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

**Technischer Name**:\
`twt-nav-main-home-link-color`

***

### Farbe (Home-Link) @hover

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

**Technischer Name**:\
`twt-nav-main-home-link-color-hover`

***

### Farbe (Home-Link) @active

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (Home-Link)"

**Technischer Name**:\
`twt-nav-main-home-link-color-active`

## Menüpunkt

***

### Textfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-color`

***

### Textfarbe @hover

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-color-hover`

***

### Textfarbe @active

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-color-active`

***

### Iconfarbe

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#333333`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-icon-color`

***

### Iconfarbe @hover

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-icon-color-hover`

***

### Iconfarbe @active

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-icon-color-active`

***

### Hintergrundfarbe

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-link-background-color`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}

***

### Hintergrundfarbe @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#eef2f5`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-background-color-hover`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}

***

### Hintergrundfarbe @active

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt"

**Technischer Name**:\
`twt-nav-main-background-color-active`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}

## Menüpunkt (hervorgehoben)

***

### Textfarbe (hervorgehoben)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ef2f3c`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-color`

***

### Textfarbe (hervorgehoben) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#feecee`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-color-hover`

***

### Textfarbe (hervorgehoben) @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ef2f3c`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-color-active`

***

### Iconfarbe (hervorgehoben)

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ef2f3c`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-icon-color`

***

### Iconfarbe (hervorgehoben) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#feecee`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-icon-color-hover`

***

### Iconfarbe (hervorgehoben) @active

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ef2f3c`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-icon-color-active`

***

### Hintergrundfarbe (hervorgehoben)

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-background-color`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}

***

### Hintergrundfarbe (hervorgehoben) @hover

**Feldtyp**:\
Farbauswahl

**Beispiel Wert**:\
`#ef2f3c`

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-background-color-hover`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}

***

### Hintergrundfarbe (hervorgehoben) @active

**Feldtyp**:\
Farbauswahl

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

**Pfad zur Einstellung**:\
Tab "Header" => Bereich "Top-Navigation" => Abschnitt "Menüpunkt (hervorgehoben)"

**Technischer Name**:\
`twt-nav-main-link-highlighted-background-color-active`

{% hint style="info" %}
**Hinweis**: Diese Konfiguration gilt nur für die Hover-Effekte "farbig hinterlegen".
{% endhint %}