Sidebar

Die Sidebar dient als primäre Navigation innerhalb einer Anwendung oder Dokumentation.
Sie unterstützt Navigationseinträge, Gruppen sowie aktive Zustände.

Beispiele

Basic

Eine einfache Sidebar mit Navigationseinträgen.


<aside class="o-sidebar">
    <nav>
        <ul class="a-list -unstyled">
            <li class="a-list__item">
                <a class="a-link" href="#">
                    Buttons
                </a>
            </li>

            <li class="a-list__item">
                <a class="a-link" href="#">
                    Icons
                </a>
            </li>

            <li class="a-list__item">
                <a class="a-link" href="#">
                    Lists
                </a>
            </li>
        </ul>
    </nav>
</aside>

Groups

Navigationseinträge können in Gruppen organisiert werden.


<aside class="o-sidebar">
    <nav>
        <details open>
            <summary>Foundation</summary>

            <ul class="a-list">
                <li class="a-list__item">Colors</li>
                <li class="a-list__item">Typography</li>
                <li class="a-list__item">Spacing</li>
            </ul>
        </details>

        <details>
            <summary>Atoms</summary>

            <ul class="a-list">
                <li class="a-list__item">Button</li>
                <li class="a-list__item">Icon</li>
                <li class="a-list__item">Badge</li>
            </ul>
        </details>
    </nav>
</aside>

Active Item

Der aktuelle Navigationseintrag sollte hervorgehoben werden.


<ul class="a-list -unstyled">
    <li class="a-list__item">
        <a class="a-link" href="#">
            Icons
        </a>
    </li>

    <li class="a-list__item">
        <a class="a-link -active" href="#">
            Buttons
        </a>
    </li>

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

Expanded Group

Die Gruppe des aktiven Elements sollte geöffnet bleiben.

Atoms


<details open>
    <summary>Atoms</summary>

    <ul class="a-list">
        <li class="a-list__item">
            <a class="a-link -active" href="#">
                Button
            </a>
        </li>

        <li class="a-list__item">
            <a class="a-link" href="#">
                Icon
            </a>
        </li>

        <li class="a-list__item">
            <a class="a-link" href="#">
                Badge
            </a>
        </li>
    </ul>
</details>

Klassen

Klasse	Beschreibung
`.o-sidebar`	Container der Sidebar.
`.o-sidebar__group`	Gruppe innerhalb der Sidebar.
`.o-sidebar__item`	Navigationseintrag innerhalb der Sidebar.

Hinweise

Die Sidebar verwendet Links, Listen und Gruppen, um eine strukturierte Navigation bereitzustellen.

Best Practices

Gruppiere Navigationseinträge logisch. Die aktive Seite sollte stets deutlich hervorgehoben werden.

Vermeide sehr tiefe Verschachtelungen. Mehr als zwei Ebenen erschweren die Orientierung.

Accessibility

Die Navigation sollte innerhalb eines <nav>-Elements liegen. Aktive Einträge sollten für Screenreader eindeutig erkennbar sein.