# Configuration

***

### Top navigation

**Field type**:\
Select

**Available values**:\
• don't show\
• show list\
• show hamburger menu

**Example value**:\
`show list`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation"

**Technical name**:\
`twt-nav-main-show`

## Basic configuration

***

### Show home link

**Field type**:\
Select

**Available values**:\
• don't show\
• show

**Example value**:\
`show`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-home-link-show`

***

### Home link

**Field type**:\
Select

**Available values**:\
• Text (default)\
• Icon

**Example value**:\
`Text (default)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-home-link`

***

### Show arrows

**Field type**:\
Select

**Available values**:\
• don't show\
• show (ThemeWare® style)\
• show (default)

**Example value**:\
`show (ThemeWare® style)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-arrows-show`

{% hint style="info" %}
Shows a arrow facing downwards next to the menu item if there are subcategories.
{% endhint %}

***

### Hover effect

**Field type**:\
Select

**Available values**:\
• defatult\
• coloured background (incl. home link)\
• coloured background (excl. home link)\
• underline (center to left and right)\
• underline (from left to right)\
• underline (from right to left)\
• underline

**Example value**:\
`coloured background (incl. home link)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-hover-type`

{% hint style="info" %}
For a left-aligned top navigation, we recommend the hover effect "coloured background (excl. home link)" instead of "coloured background (incl. home link)".
{% endhint %}

***

### Height

**Field type**:\
Number field

**Example value**:\
`60`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-height`

***

### Padding (Nav items)

**Field type**:\
Number field

**Example value**:\
`16`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-padding`

{% hint style="info" %}
Enter the desired spacing for the menu items.
{% endhint %}

***

### Padding bottom

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-padding-bottom`

{% hint style="info" %}
Enter the desired bottom spacing for the top navigation.
{% endhint %}

***

### Margin left @Tablet (≥992px)

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-margin-left`

{% hint style="info" %}
**Note**: This configuration is only available for the basic layout "boxed".
{% endhint %}

***

### Margin right @Tablet (≥992px)

**Field type**:\
Number field

**Example value**:\
`0`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic configuration"

**Technical name**:\
`twt-nav-main-margin-right`

{% hint style="info" %}
**Note**: This configuration is only available for the basic layout "boxed".
{% endhint %}

## Basic headers "Header 1" and "Header 2"

***

### Width

**Field type**:\
Select

**Available values**:\
• default\
• Container-Max-Width (Full-width-boxed)\
• 100% (Full-width)

**Example value**:\
`default`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Basic headers "Header 1" and "Header 2""

**Technical name**:\
`twt-nav-main-width`

{% hint style="info" %}
Select the sizing mode of the "Top navigation".

**default**: The width of the "Top navigation" is based on the configuration of the width of the header.

**Note**: This configuration does not apply in the basic layout "boxed".
{% endhint %}

## Colour configuration

***

### Background colour (Navigation)

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-background-color`

***

### Border colour

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-border-bottom-color`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effect "default".
{% endhint %}

***

### Border colour (underline) @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-border-bottom-color-hover`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effect "underline".
{% endhint %}

***

### Border colour (Seperator)

**Field type**:\
Color picker

**Example value**:\
`#cccccc`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Colour configuration"

**Technical name**:\
`twt-nav-main-border`

## Typography

***

### Font family

**Field type**:\
Select

**Available values**:\
• Text\
• Headlines

**Example value**:\
`Text`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-font-family`

***

### Font size

**Field type**:\
Number field

**Example value**:\
`18`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-font-size`

***

### Font weight

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`bold`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-font-weight`

***

### Font weight @active

**Field type**:\
Select

**Available values**:\
• light\
• normal\
• bold

**Example value**:\
`bold`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-font-weight-active`

***

### Text alignment

**Field type**:\
Select

**Available values**:\
• align left\
• align right\
• align center\
• space-between\
• space-around

**Example value**:\
`align left`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-justify-content`

{% hint style="info" %}
Select the desired horizontal alignment.

**left**\
Items are positioned at the beginning of the container.

**right**\
Items are positioned at the end of the container.

**center**\
Items are positioned at the center of the container.

**space-between**\
Items are positioned with space between them.

**space-around**\
Items are positioned with space before, between, and after them.
{% endhint %}

***

### Text formatting

**Field type**:\
Select

**Available values**:\
• none\
• uppercase\
• lowercase\
• capitalize

**Example value**:\
`none`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Typography"

**Technical name**:\
`twt-nav-main-text-transform`

## Link (Home link)

***

### Colour (Home link)

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (Home link)"

**Technical name**:\
`twt-nav-main-home-link-color`

***

### Colour (Home link) @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (Home link)"

**Technical name**:\
`twt-nav-main-home-link-color-hover`

***

### Colour (Home link) @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (Home link)"

**Technical name**:\
`twt-nav-main-home-link-color-active`

## Link

***

### Text colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-color`

***

### Text colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-color-hover`

***

### Text colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-color-active`

***

### Icon colour

**Field type**:\
Color picker

**Example value**:\
`#333333`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-icon-color`

***

### Icon colour @hover

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-icon-color-hover`

***

### Icon colour @active

**Field type**:\
Color picker

**Example value**:\
`$sw-color-brand-primary`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-icon-color-active`

***

### Background colour

**Field type**:\
Color picker

**Example value**:\
`rgba(255, 255, 255, 0)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-link-background-color`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}

***

### Background colour @hover

**Field type**:\
Color picker

**Example value**:\
`#eef2f5`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-background-color-hover`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}

***

### Background colour @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link"

**Technical name**:\
`twt-nav-main-background-color-active`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}

## Link (highlighted)

***

### Text colour (highlighted)

**Field type**:\
Color picker

**Example value**:\
`#ef2f3c`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-color`

***

### Text colour (highlighted) @hover

**Field type**:\
Color picker

**Example value**:\
`#feecee`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-color-hover`

***

### Text colour (highlighted) @active

**Field type**:\
Color picker

**Example value**:\
`#ef2f3c`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-color-active`

***

### Icon colour (highlighted)

**Field type**:\
Color picker

**Example value**:\
`#ef2f3c`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-icon-color`

***

### Icon colour (highlighted) @hover

**Field type**:\
Color picker

**Example value**:\
`#feecee`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-icon-color-hover`

***

### Icon colour (highlighted) @active

**Field type**:\
Color picker

**Example value**:\
`#ef2f3c`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-icon-color-active`

***

### Background colour (highlighted)

**Field type**:\
Color picker

**Example value**:\
`rgba(255, 255, 255, 0)`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-background-color`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}

***

### Background colour (highlighted) @hover

**Field type**:\
Color picker

**Example value**:\
`#ef2f3c`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-background-color-hover`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}

***

### Background colour (highlighted) @active

**Field type**:\
Color picker

**Example value**:\
`#ffffff`

**Path to the configuration**:\
Tab "Header" => Block "Top navigation" => Section "Link (highlighted)"

**Technical name**:\
`twt-nav-main-link-highlighted-background-color-active`

{% hint style="info" %}
**Note**: This configuration only applies to the hover effects "coloured background".
{% endhint %}