# Sidebar Navigation
### Farben
Zusätzlich zu den üblichen Farben, kann auch der aktive Pfad (2) eingefärbt werden. Die :hover (3) Farben werden zusätzlich für das aktive Element verwendet.
**Background (1)** ist die allgemeine Hintergrundfarbe eines Menü-Elementes. **Background:aktiver Pfad (4)** legt die Farbe für die aktive Ebene fest. Dadurch kann der Kunde leichter unterscheiden in welchen Bereich welcher Ebene er tiefer navigieren kann. **Background:hover (2)** markiert das aktive obere Element und weitere **Mouse-Over Aktionen** über den Menü-Elementen.
{% hint style="info" %}
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
{% endhint %}
### Grundeinstellungen
Neben den Einstellungen für die Darstellung der Schrift kann auch ein **vertikaler Innenabstand (1)** gesetzt werden. Der **Vertikale Innenabstand (1)** bestimmt, wie hoch die einzelnen Menü-Einträge werden. Bei vielen Kategorien sollte ein möglichst kleiner Wert gewählt werden.
Durch die Option **Abstand unten (2)** können die einzelnen Elemente nochmal voneinander getrennt werden.
Der **Anzeigemodus (3)** bestimmt den Modus der Sidebar-Navigation. Im Modus `Aufklappbar` können die Unterkategorien auf- und zugeklappt werden, ohne die Seite zu wechseln.
Für das **Auf- / Einklappen Icon (4)** stehen Dir verschiedene Optionen bereit. Die Symbole werden angezeigt, sobald der **Anzeigemodus** auf **Aufklappbar** steht.
Mit Hilfe der **Hover Animation (5)** kann eine animierte Unterlinie bei Mouse-Over und Aktiv-Status ab der zweiten Navigations-Ebene dargestellt werden.
Beispiele:
### 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.
Ü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.
Beispiel:
Kategorie Icons in der Sidebar Navigation
---
# 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/styling/elemente/sidebar-navigation.md?ask=
```
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.