> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/header/dropdown-navigation.md).
# Dropdown navigation
{% hint style="info" %}
Activate the flyout navigation under\
*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.
### Basic configuration
A dropdown navigation can basically be triggered by a MouseOver event (Hover event) or a Click event. Via the setting **Dropdown trigger** (Removed in version 5.0.0) 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)**.
#### 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 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.
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.