> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/inhalt-content/tab-liste.md).

# Tab - List

The element allows you to present content in a clear tab format.

Similar to the accordion element, **multiple sections can be organized**; however, the content is shown and hidden through tabs here. This provides an intuitive and user-friendly way to display extensive information in a compact space.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FOusDYAmsSRIQuM1yzZOz%2FBildschirmfoto%202024-10-07%20um%2022.15.41.png?alt=media&amp;token=327ac014-44fc-41ab-9b2b-fc9351415c18" alt=""><figcaption></figcaption></figure>

### Tab Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FimIXPXF30vUMrc88q26u%2FBildschirmfoto%202024-10-07%20um%2022.17.03.png?alt=media&amp;token=740d0a36-e86e-431a-a3b5-bb21e6e1cf4a" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Function</th><th>Description</th></tr></thead><tbody><tr><td>Sorting (1)</td><td>Duplicate, move, and delete individual elements</td></tr><tr><td>Title (2)</td><td>Set the title of the tab here</td></tr><tr><td>Content (3)</td><td>Set the content of the tab here. TWIG variables are also possible.</td></tr><tr><td>New Tab (4)</td><td>Add as many additional tabs as you like</td></tr></tbody></table>

### Advanced Settings

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2FzetAvS3HhBLmIp2SVoM2%2FBildschirmfoto%202024-10-07%20um%2022.18.05.png?alt=media&amp;token=97671557-9b4b-45ab-8b24-abac84056f36" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="268">Function</th><th>Description</th></tr></thead><tbody><tr><td>Display Mode (1)</td><td>The tab navigation is either placed in <strong>the top bar above the content</strong> or in the <strong>sidebar next to the content</strong></td></tr><tr><td>Style of Tabs (2)</td><td><strong>Buttons</strong> = Display as buttons<br><strong>Standard</strong> = Display in Shopware standard</td></tr><tr><td>Vertical Alignment (3)</td><td>Here you can set how the vertical alignment of the element in the storefront should be calculated.</td></tr></tbody></table>