# Navigation

### Übersicht

Das [Offcanvas Menü](https://docs.atloss.de/academy/fachbegriffe/offcanvas) ist das zentrale Element der mobilen Navigation. Hierbei stehen dir die nachfolgenden Konfigurationsoptionen zur Verfügung.

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FAOJftIk8kd7BVDIimvS6%2Foffcanvas-navigation.webp?alt=media&#x26;token=79cac11f-d101-4109-aac1-97ca581d788f" alt="" width="188"><figcaption><p>Offcanvas Navigation unseres Kunden <a href="https://wisy-water.com/">https://wisy-water.com/</a></p></figcaption></figure>

### Widgets

<figure><img src="https://3272904207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FpapLvT9HTe34BQRCbfyY%2Fuploads%2FMxrwPhci8ymfxSIwB3ow%2Foffcanvas-navigation-widgets.webp?alt=media&#x26;token=e0ab53d2-2f8c-4f53-a0c2-ee9b6bd57481" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Hinweise zum Sprach Schalter**

Solltest du einen mehrsprachigen Shop betreiben wollen, so bietet dir Shopware von Haus aus bereits ein Sprach Schalter Feature. Die jeweiligen Sprachen, die du in deinem [Verkaufskanal](https://docs.shopware.com/de/shopware-6-de/einstellungen/Verkaufskanaele) definierst, werden anschließend in einem Sprach Schalter in der [Top Bar](https://docs.atloss.de/academy/fachbegriffe/top-bar) und im [Offcanvas Menü](https://docs.atloss.de/academy/fachbegriffe/offcanvas) ausgegeben. Durch diesen kann der Kunde im Shop mit wenigen Klicks die Sprache ändern. Ähnliche Einstellungen können ebenfalls in der Theme Konfiguration für die [Top Bar](https://docs.atloss.de/header/top-bar#widgets) vorgenommen werden.
{% endhint %}

<details>

<summary>Sprach-Schalter-Layout</summary>

Stelle den Sprach-Schalter in unterschiedlichen Layouts dar:

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge** \
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>

<details>

<summary>Sprach-Schalter-Dropdown-Layout</summary>

Stelle das Sprach-Schalter-Dropdown in unterschiedlichen Layouts dar.

***

**Text** \
Zeigt nur den Text der ausgewählten Sprache an.

**Flagge**\
Zeigt nur die Flagge der ausgewählten Sprache an.

**Flagge und Text** \
Zeigt sowohl die Flagge als auch den Text der ausgewählten Sprache an.

</details>