# Dropdown Navigation

> ab Theme Version 2.6.0

{% hint style="info" %}
Aktiviere die Dropdown Navigation unter\
\&#xNAN;*Header >* [*Main Navigation*](#main-navigation-kategorien) *>* [*Grundeinstellungen*](#grundeinstellungen-1) *> Unternavigation Aussehen*
{% endhint %}

### Farben

Die Farben für den **Hintergrund (1)** sowie **Vordergrund (2)** der Dropdown Navigation lassen sich unabhängig von der Flyout-Navigation einstellen. Ein zusätzlicher **Rahmen (3)** kann die Dropdown Navigation stärker vom Hintergrund abheben - hier gibt es keine :hover-Farbe, da der Rahmen um die ganze Liste gelegt wird.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-79ade3e101ea4d4968c096f5ada39d6bed52fc4a%2Fdocs-de-header-dropdown-navigation-colors-config%20\(1\).png?alt=media)

### Grundeinstellungen

Eine Dropdown Navigation kann grundsätzlich durch ein MouseOver-Event (Hover-Event) oder ein Click-Event ausgelöst werden. Über die Einstellung **Dropdown Auslöser** <mark style="background-color:red;">(Entfernt in Version 5.0.0)</mark> kannst Du selbst bestimmen, wie sich ein Dropdown auf Deinem Onlineshop öffnen lässt.

Die **Navigations-Ebenen (1)** geben an, wie viele Ebenen des Kategoriebaums dargestellt werden sollen. Gezählt wird ab der Hauptkategorien-Ebene.

Du kannst zwischen mehreren **Animationen (2)** wählen und ein **Icon bei "In neuem Tab öffnen" Links (3)** hinzufügen.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FZIuGmUYxYQT9ZSc6jicx%2Fdocs-de-config-theme-header-dropdown-navigation-basic-configuration.png?alt=media\&token=cb3645d8-a756-4dad-be6d-171dbcf7a065)

#### Dropdown mit Click-Event

Da sich bei einem Click-Event auf die **Eltern-Kategorie (1)** diese selbst nicht öffnen lässt, zeigt das Dropdown die Eltern-Kategorie im Dropdown mit dem Zusatztest "{Kategoriename} anzeigen" an, wenn es sich nicht um eine Strukturkategorie handelt.

![Dropdown mit Click-Event Auslöser](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2a513e0e815571b48fdb6d5aab9efa20fd15d530%2Fdocs-de-header-dropdown-navigation-basic-settings-storefront.png?alt=media)

#### Dropdown mit Hover-Event

Anders als beim Dropdown ausgelöst durch ein Click-Event besteht hier keine Notwendigkeit, die Elternkategorie erneut in das Dropdown aufzunehmen.

### Elemente

Wie beim Flyout-Menü lassen sich hier die Schriftgröße und das Schriftgewicht für die einzelnen Menü-Items anpassen.

### Kategorie Icons

> ab Theme Version 4.7.0

Über die **Zusatzfelder** unter Kataloge > Kategorien > \[Kategorie auswählen] im Tab "Weitere" findest Du ein Medienfeld **Kategorie Icon** zum Hinterlegen des Kategorie Icons.

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FzIsZxcoQzEbLgDMGo41z%2Fdocs-de-config-theme-category-icon.png?alt=media&#x26;token=a8067763-12dc-41d9-940c-8e0448021113" alt=""><figcaption></figcaption></figure>

Über die **Checkbox Icon (1)** aktivierst Du die Darstellung der Icons im Hauptmenü und stellst die **Größe (2)** der Icons für das jeweilige Menü ein.