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


---

# 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/header/top-navigation/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.