# 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.

![](/files/EbvQsa9yaB205hSp7AU8)

### 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)**.

![](/files/RlXQUptXHjsxJvmaDrd5)

#### 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](/files/QtP8D5bLva7Hmb3ekhcc)

#### 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="/files/DsOojuLQEXyxKBmdOWEm" 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.


---

# 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://themedocs.zenit.design/en/styling/header/dropdown-navigation.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.