# Sidebar Navigation

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-89a68d67657fcd514247ae1ea2daab9f8ce81229%2Fdocs-front-kategorie-sidebar-nav-filter.jpg?alt=media)

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-b8bfacbbab184cd1ed5c412d6b9044b9ed77e506%2Fdocs-de-config-theme-elements-sidebar-navigation-colors.png?alt=media)

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

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-2e979f02128819b26ad87c577cca6bf6526118d5%2Fdocs-de-storefront-theme-elements-sidebar-navigation-color.png?alt=media)

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

### Grundeinstellungen

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2F1MyZwypn2CUqXXvwMH1o%2Fdocs-de-config-theme-components-sidebar-navigation-basic-configuration.png?alt=media\&token=867eb4b1-c795-442e-89c6-cb67baf66283)

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.

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-38299299e4330cba11d7f5baf6431a3a50bc3392%2Fdocs-de-storefront-elements-sidebar-navigation-basic-configuration.png?alt=media)

Beispiele:

![2px Abstand nach unten, Hover Animation Standard](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-045a8dd0fc9ee48464d54a0b3c88f3774584562a%2Fdocs-front-kategorie-sidebar-navigation-grundeinstellungen-1.png?alt=media)

![Minimal Design Beispiel, keine Farben oder Konturen, Hover Animation: Unterlinie](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fgit-blob-4682014bcdd3f36618268354e674a27b0bd60bc3%2Fdocs-front-kategorie-sidebar-navigation-grundeinstellungen-2.png?alt=media)

### 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FzIsZxcoQzEbLgDMGo41z%2Fdocs-de-config-theme-category-icon.png?alt=media&#x26;token=a8067763-12dc-41d9-940c-8e0448021113" 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="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FYWAHBcIiU3ZMhx2GnFOE%2Fdocs-en-storefront-custom-fields-category-icon-media-sidebar.png?alt=media&#x26;token=98acc58b-3fb0-460f-ae73-a2de6f5f163d" alt=""><figcaption><p>Kategorie Icons in der Sidebar Navigation</p></figcaption></figure>