# Dropdown navigation

{% hint style="info" %}
Activate the flyout navigation under\
\&#xNAN;*Header >* [*Main navigation*](#main-navigation-kategorien) *>* [*Basic configuration*](#grundeinstellungen-1) *>* Subnavigation appearance
{% endhint %}

### Colors

The colors for the **background (1)** as well as **foreground (2)** of the dropdown navigation can be set independently from the flyout navigation. An additional **border (3)** can make the dropdown navigation stand out more from the background - there is no :hover color here, as the frame is placed around the whole list.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FBChLzsEb1Ne1QBXdAsSU%2Fdocs-en-config-theme-header-dropdown-navigation-colors.png?alt=media\&token=66489c30-2267-40e7-8d6f-cb4ec4b4ccac)

### Basic configuration

A dropdown navigation can basically be triggered by a MouseOver event (Hover event) or a Click event. Via the setting **Dropdown trigger**  <mark style="background-color:red;">(Removed in version 5.0.0)</mark> you can determine yourself how the dropdown opens.

The **navigation levels (1)** specify how many levels of the category tree should be displayed. Counted is from the main category level.

You can choose between several **animations (2)** and add an icon for **"Open in new tab" links (3)**.

![](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F31jxIhF7x67sV5dWFQFi%2Fdocs-en-config-theme-header-dropdown-navigation-basic-configuration.png?alt=media\&token=107cae33-933f-4cd3-adf0-1376cef9bb80)

#### Dropdown with Click-event

Since a click event on the **parent category (1)** does not let this open itself, the dropdown will show the parent category in the dropdown with the additional text "show {category name}" if it is not a structural category.

![Dropdown mit Click-Event Auslöser](https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FvypZU5GhZ1AzMUc7FkrF%2Fdocs-de-header-dropdown-navigation-basic-settings-storefront.png?alt=media\&token=ac921584-a6a3-48e9-9762-d164a44bf8a9)

#### Dropdown with Hover-event

Unlike the dropdown triggered by a click event, there is no need to include the parent category in the dropdown again.

### Items

As with the flyout menu, the font size and weight can be adjusted for the individual menu items.

### Category icons

> from theme version 4.7.0

Via the **custom fields** under Catalogues > Categories > \[Select category] in the tab "Additional" you will find a media field **Category Icon** for configuring the icon.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2F9P2XTRBVvu8NeyQt0zGH%2Fdocs-en-config-theme-category-icon.png?alt=media&#x26;token=3d3c60ac-cce4-4c95-9cd4-e5f7fec90ac8" alt=""><figcaption></figcaption></figure>

You can use the checkbox **Icon (1)** to activate the display of icons in the main navigation and set the **Size (2)** of the icons for the respective menu.