# Sidebar navigation

![](/files/-MHX2F-x3mVhVmmPxS4f)

### Colors

In addition to the usual colors, the **active path (2)** can also be colored. The **:hover (3)** colors are additionally used for the active element.

![](/files/zJgHFVp78PVNFUsPqfL2)

**Background (1)** is the general background color of a menu item. **Background:active path (4)** sets the color for the active item. This makes it easier for the customer to distinguish which area of which level he can navigate deeper. **Background:hover (2)** marks the active parent element and the mouse-over action of the current menu elements.

![](/files/UArhnt4O613p8LJ6wXd7)

{% hint style="info" %}
You can underline an active element by activating this option in the basic configuration.
{% endhint %}

### Basic configuration

![](/files/jufWBlKO2pfKthVIlxch)

In addition to the font display settings, you can also specify a **vertical padding (1)**. The **vertical padding (1)** determines the height of each menu item. If there are many categories, a value as small as possible should be chosen.

Through the option **margin bottom (2)** the individual elements can be separated from each other.

The **display mode (3)** determines the mode of sidebar navigation. In mode `Expandable` subcategories can be expanded and collapsed without changing/loading the page.

There are various options available for the **Collapse icon (4)**. The icons are displayed as soon as the **Display mode** is set to `Expandable`.

**Hover animation (5)** can display an animated subline on mouse-over and active-state from the second navigation level.

![](/files/RDDQWzg80sMtrvLtp1vU)

Examples:

![2px margin bottom, hover animation default](/files/-MH_I_vfCmFo_CA-O3TB)

![Minimal design example, no colors or borders, hover animation: underline ](/files/-MH_J6n9lp7eKtSmnQ36)

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

Example:

<figure><img src="/files/QcJREWsKZoNJZnJuBSHE" alt=""><figcaption><p>Category icons in sidebar navigation</p></figcaption></figure>


---

# 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/components/sidebar-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.