> 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/elemente/navigation/inhaltsverzeichnis.md).

# Inhaltsverzeichnis

Das Element **Inhaltsverzeichnis** durchsucht die aktuelle Seite nach Überschriften und baut daraus automatisch eine klickbare Sprungmarken-Liste. Ein Klick auf einen Eintrag scrollt sanft zur passenden Stelle und hebt den Abschnitt kurz hervor – ideal für lange Ratgeber, ausführliche Produktbeschreibungen oder umfangreiche Erlebniswelten.

Du legst selbst fest, welche Überschriften berücksichtigt werden – über die Überschriften-Ebene (h1 bis h6) und/oder eigene CSS-Selektoren – und welche Bereiche ausgeschlossen bleiben. Die Verschachtelung der Ebenen wird dabei automatisch übernommen, sodass Unterüberschriften eingerückt unter ihrer Hauptüberschrift erscheinen.

<figure><img src="/files/srGBK7Ydu0PJgMTKRUl2" alt=""><figcaption><p>Beispiel im Storefront: Das Inhaltsverzeichnis verlinkt automatisch auf die Überschriften der Seite und bildet deren Hierarchie ab.</p></figcaption></figure>

{% hint style="success" %}
**Tipp für eine gute Orientierung**

Platziere das Element möglichst weit oben auf einer langen Seite. So erhalten deine Besucher sofort einen Überblick über alle Inhalte und springen mit einem Klick direkt zum gewünschten Abschnitt.
{% endhint %}

### Allgemein

Im Reiter **Allgemein** legst du die Überschrift des Verzeichnisses fest und steuerst, welche Inhalte als Sprungmarken übernommen werden. Die beiden Unterreiter **Einbeziehen** und **Ausschließen** bündeln dabei die jeweiligen Quellen.

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

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>Überschrift des Inhaltsverzeichnisses (1)</td><td>Optionale Überschrift, die über der Verlinkungsliste angezeigt wird. Bleibt das Feld leer, erscheint nur die Liste. Den Überschrift-Typ (h1–h6) und das Verhalten bestimmst du im Reiter <strong>SEO</strong>.</td></tr><tr><td>Überschriften (2)</td><td>Wähle die Überschriften-Ebenen (<strong>h1</strong> bis <strong>h6</strong>), die automatisch als Sprungmarken übernommen werden. Die Reihenfolge und Verschachtelung auf der Seite bildet das Inhaltsverzeichnis hierarchisch ab.</td></tr><tr><td>CSS Selektoren – Einbeziehen (3)</td><td>Zusätzlich zu den Überschriften kannst du einzelne Sektionen, Blöcke oder Elemente per CSS-Selektor (z. B. <code>.meine-klasse</code> oder <code>#meine-id</code>) aufnehmen. Bestätige jeden Selektor einzeln mit <strong>Enter</strong>.</td></tr></tbody></table>

{% hint style="info" %}
**Einbeziehen & Ausschließen**

Über die beiden Schalter **Einbeziehen** und **Ausschließen** trennst du die Quellen sauber: Links bestimmst du, was im Verzeichnis landet, rechts schließt du gezielt einzelne Bereiche wieder aus.
{% endhint %}

### Ausschließen

Im Unterreiter **Ausschließen** blendest du einzelne Bereiche gezielt aus dem Inhaltsverzeichnis aus – auch wenn ihre Überschriften eigentlich zur gewählten Ebene passen.

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

<table><thead><tr><th width="287">Funktion</th><th>Beschreibung</th></tr></thead><tbody><tr><td>CSS Selektoren – Ausschließen (1)</td><td>Lege per CSS-Selektor fest, welche Bereiche <strong>nicht</strong> im Inhaltsverzeichnis erscheinen sollen – etwa wiederkehrende Banner, Teaser oder das Inhaltsverzeichnis selbst. Bestätige auch hier jeden Selektor einzeln mit <strong>Enter</strong>.</td></tr></tbody></table>

### SEO - Einstellungen

Über den Reiter **SEO** bestimmst du, als welcher Überschriften-Typ die optionale Verzeichnis-Überschrift ausgegeben wird.

{% content-ref url="/pages/LHlzFdFr8hVLrftTJKPh" %}
[SEO](/cms-bundle/elemente/konfigurationsbausteine/seo.md)
{% endcontent-ref %}