> 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

![](/files/wGWczzDlSOdYj9cLVBgG)

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

![](/files/xOXYCEcaXHiPOMm9ebfo)

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

![](/files/rU9MbbP43sKvIhi1zwO5)

{% hint style="info" %}
Der Unterstrich am aktiven Element kann in den Grundeinstellungen im nächsten Schritt aktiviert werden.
{% endhint %}

### Grundeinstellungen

![](/files/o74F2BbbV5iRtjU4IRhe)

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.

![](/files/ZKkBCIIdwk7q2dHnwqTY)

Beispiele:

![2px Abstand nach unten, Hover Animation Standard](/files/qIKg8ClZPmPlFpBDXRmJ)

![Minimal Design Beispiel, keine Farben oder Konturen, Hover Animation: Unterlinie](/files/PIVjYCdFOamnbiWiuQgG)

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

<figure><img src="/files/LIN3rneuG1ifw8STZP27" alt=""><figcaption></figcaption></figure>

Ü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:

<figure><img src="/files/VGh97rLx9yMzHYflQ7tW" alt=""><figcaption><p>Kategorie Icons in der Sidebar Navigation</p></figcaption></figure>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://themedocs.zenit.design/styling/elemente/sidebar-navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
