> 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 %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.rh-webdesign.com/cms-bundle/elemente/navigation/inhaltsverzeichnis.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.