> 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/styling/elemente/sidebar-navigation.md).
# 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: