DK97 UI

Table of Contents

Das Table of Contents Molecule dient zur Navigation innerhalb einer Seite.
Es verwendet Listen und Links, um eine hierarchische Übersicht über die Inhalte bereitzustellen.

Beispiele

Basic

Ein einfaches Inhaltsverzeichnis mit zwei Abschnitten. 


<nav class="m-table-of-contents">
    <h2 class="m-table-of-contents__title">
        Inhalt
    </h2>

    <ul class="a-list">
        <li class="a-list__item">
            <a class="a-link" href="#section-1">
                Abschnitt 1
            </a>
        </li>

        <li class="a-list__item">
            <a class="a-link" href="#section-2">
                Abschnitt 2
            </a>
        </li>
    </ul>
</nav>

Nested Sections

Verschachtelte Inhaltsverzeichnisse können verwendet werden, um Unterabschnitte einer Seite abzubilden. 


<nav class="m-table-of-contents">
    <h2 class="m-table-of-contents__title">
        Inhalt
    </h2>

    <ul class="a-list">
        <li class="a-list__item">
            <a class="a-link" href="#examples">
                Beispiele
            </a>

            <ul class="a-list">
                <li class="a-list__item">
                    <a class="a-link" href="#basic">
                        Basic
                    </a>
                </li>

                <li class="a-list__item">
                    <a class="a-link" href="#advanced">
                        Advanced
                    </a>
                </li>
            </ul>
        </li>

        <li class="a-list__item">
            <a class="a-link" href="#classes">
                Klassen
            </a>
        </li>
    </ul>
</nav>

Klassen

Klasse Beschreibung
.m-table-of-contents Container des Inhaltsverzeichnisses.
.m-table-of-contents__title Titel des Inhaltsverzeichnisses.
.a-list Wird für die Listenstruktur innerhalb des Inhaltsverzeichnisses verwendet.
.a-link Wird für die Sprungmarken innerhalb des Inhaltsverzeichnisses verwendet.

Hinweise

Hinweis
Das Table of Contents Molecule kombiniert die Komponenten .a-list und .a-link. Die Zielabschnitte sollten passende id-Attribute besitzen.

Best Practices

Empfohlene Verwendung
Verwende ein Inhaltsverzeichnis bei längeren Seiten, damit Benutzer schnell zu relevanten Abschnitten springen können.
Vermeiden
Für sehr kurze Seiten mit nur wenigen Abschnitten ist ein Inhaltsverzeichnis meist nicht notwendig. Zu viele Einträge können die Navigation unübersichtlich machen.

Accessibility

Accessibility
Das Inhaltsverzeichnis sollte innerhalb eines <nav>-Elements liegen. Dadurch erkennen Screenreader die Navigation korrekt.