# Tab - Liste

Das Element ermöglicht es, Inhalte in einem übersichtlichen Tab-Format darzustellen.&#x20;

Ähnlich wie beim Akkordeon-Element können **mehrere Abschnitte organisiert werden**, jedoch werden die Inhalte hier durch Tabs ein- und ausgeblendet. Dies bietet eine intuitive und benutzerfreundliche Möglichkeit, umfangreiche Informationen auf kleinem Raum anzuzeigen.

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FilB2NrmfmcvyMFV90aWi%2FBildschirmfoto%202024-10-06%20um%2022.49.12.png?alt=media&#x26;token=40bc8657-d2f4-47b4-8569-46f35643d69f" alt=""><figcaption></figcaption></figure>

### Tab - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FfUfKYGuu3S7Vm7Q5rlHR%2FBildschirmfoto%202024-10-06%20um%2022.51.40.png?alt=media&#x26;token=f9913b25-0366-4efc-9de9-eb33eea4283b" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Sortierung (1)</td><td>Duplizieren, verschieben und löschen der einzelnen Elemente</td></tr><tr><td>Titel (2)</td><td>Hier wird der Titel des Tabs gesetzt</td></tr><tr><td>Inhalt (3)</td><td>Hier setzt du den Inhalt des Tabs. Auch TWIG Variablen sind möglich.</td></tr><tr><td>Neuer Tab (4)</td><td>Hier kannst du beliebig viele weitere Tabs hinzufügen</td></tr></tbody></table>

### Erweiterte - Einstellungen

<figure><img src="https://3915424864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnbkIIyayUD6QJmp1xMoG%2Fuploads%2FJcyrNKNX9hlkfsf59QBc%2FBildschirmfoto%202024-10-06%20um%2022.54.35.png?alt=media&#x26;token=50a70c74-706d-4df6-abc8-7737fe8f9065" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Anzeigemodus (1)</td><td>Die Tab-Navigation wird entweder in <strong>der Topbar über den Inhalten</strong>, oder in der <strong>Sidebar neben dem Inhalten</strong> platziert</td></tr><tr><td>Style der Tabs (2)</td><td><strong>Buttons</strong> = Darstellung als Buttons<br><strong>Standard</strong> = Darstellung im Shopware Standard</td></tr><tr><td>Vertikale Ausrichtung (3)</td><td>Hier kannst du einstellen, wie die vertikale Ausrichtung des Elements in der Storefront berechnet werden soll.</td></tr></tbody></table>
