Sidebar Navigation – Seitenleisten-Navigation im UI-Design

Eine Sidebar Navigation ist eine vertikale Navigationsleiste, die dauerhaft oder einblendbar seitlich des Hauptinhalts positioniert ist und für komplexe Anwendungen mit mehreren Navigationshierarchien geeignet ist.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Seitenleiste, Side Navigation, Left Nav, Side Drawer, Nav Drawer, Sidebar Menu

Was ist eine Sidebar Navigation?

Die Sidebar Navigation ist das primäre Navigationsmuster für komplexe Anwendungen: Dashboards, Admin-Panels, E-Mail-Clients, Projektmanagement-Tools und IDEs. Im Gegensatz zur horizontalen Navigation Bar bietet sie Platz für tiefere Hierarchien, Icon-Label-Paare, Gruppenüberschriften und verschachtelte Untermenüs. Die Sidebar begleitet den Nutzer dauerhaft als vertikale Orientierungsachse.

Erklärung

Varianten

Persistent Sidebar (Always Visible): Dauerhaft sichtbar neben dem Hauptinhalt. Content-Bereich ist entsprechend schmaler. Standard für Desktop-Dashboard-Anwendungen. Keine Animation beim Erscheinen/Verschwinden.

Collapsible / Expandable Sidebar: Kann zwischen einer breiten Vollform (mit Text-Labels) und einer schmalen Icon-Only-Form umgeschaltet werden. Spart Platz ohne die Navigation zu verstecken. Bekannt aus VS Code, Notion, Linear.

Overlay / Drawer Sidebar (Mobile): Erscheint bei Bedarf über dem Content-Bereich (nicht neben ihm). Backdrop blockiert den Hintergrund. Wird per Swipe-Geste oder Hamburger-Button geöffnet/geschlossen. Standard-Pattern für Mobile.

Mini Sidebar: Permanente schmale Version (40–48 px) mit nur Icons. Bei Hover expandiert zu voller Breite mit Text-Labels (Hover-to-expand). Komplexes Interaktionsmuster – sparsam einsetzen.

Anatomy der Sidebar

• Brand/Logo-Bereich: Oben, oft mit Workspace-Wechsler
• Navigation Sections: Thematisch gruppierte Links mit optionalen Section Headers
• Navigation Item: Icon + Label, Active-Indikator, optionale Badge
• Nested Items / Submenus: Eingerückte Untermenüpunkte (auf- und zuklappbar)
• Divider: Trennlinien zwischen Sektionen
• Secondary Actions: Unten positionierte Items (Einstellungen, Logout, Hilfe)
• Collapse Toggle: Button um Sidebar zu verkleinern

Navigation Item States

Breiten

• Expanded: 200–280 px (Text-Labels sichtbar)
• Collapsed/Mini: 48–72 px (nur Icons)
• Mobile Drawer: 240–320 px (80% der Screen-Breite als Maximum)

Accessibility (WCAG 2.1)

• Sidebar als <nav aria-label="Primäre Navigation"> oder mit eigenem <aside> + <nav> je nach Rolle
• Navigation List: <ul> mit <li> und <a> / <button>
• Aktiver Navigationspunkt: aria-current="page" auf dem aktuellen Link
• Aufklappbare Unterpunkte: aria-expanded="true/false" auf dem Parent-Item, aria-controls auf das Untermenü
• Collapse/Expand der gesamten Sidebar: aria-expanded auf dem Toggle-Button, aria-label anpassend aktualisieren
• Mobile Drawer: aria-modal="true", Fokus-Trap beim Öffnen, Escape zum Schließen
• Icons ohne Labels (Mini-Sidebar): aria-label oder Tooltip für jeden Link
• Keyboard: Alle Items per Tab erreichbar, Enter öffnet Links oder expandiert Untermenüs

Beispiele

1. VS Code – Activity Bar + Side Bar: Zweistufiges Sidebar-System. Die schmale Activity Bar links (Icons) wechselt den Kontext der breiten Side Bar daneben (Explorer, Suche, Git, Extensions). Collapsible durch Klick auf das aktive Icon – eines der durchdachtesten Navigations-Designs in Desktop-Software.
2. Notion – Left Sidebar: Collapsible Sidebar mit Workspace-Hierarchie. Icons und Labels, aufklappbare Seiten-Bäume, Drag-and-Drop-Reordering. Auf Mobile als Drawer implementiert. Breadcrumb im Content-Bereich ergänzt die Orientierung.
3. Mobile vs. Desktop: Material Design Navigation Drawer öffnet sich von links mit einer Slide-In-Animation über dem Content. Backdrop erscheint. Swipe-to-dismiss auf Mobile. Bottom Navigation ist bei 3–5 Hauptbereichen die bevorzugte Mobile-Alternative.
4. Accessibility Best Practice: GitHub's Sidebar-Navigation in Repository-Einstellungen setzt aria-current="page" korrekt, hat sichtbare Fokus-Indikatoren auf allen Links und funktioniert vollständig per Tastaturnavigation.
5. Häufiger Fehler: Sidebar-Navigation auf Mobilgeräten dauerhaft sichtbar belassen – verbraucht zu viel horizontalen Platz. Auf Mobile immer als Overlay/Drawer implementieren. Zweiter Fehler: Zu viele Ebenen der Navigationshierarchie – mehr als 2 Ebenen (Parent + Child) verwirren Nutzer.

In der Praxis

Figma: Sidebar-Komponente mit Auto Layout (Vertical Fill). Navigation Item als Unterkomponente mit States. Section Headers als eigene Text-Komponente. Collapsed-Variant: schmalere Breite, Labels ausgeblendet via visibility: hidden (nicht display: none, damit Layout stabil bleibt). Overflow: Hidden für kompakte Darstellung.

HTML/CSS-Grundstruktur: ```html <aside class="sidebar" aria-label="Dashboard-Navigation"> <div class="sidebar-brand"> <a href="/" aria-label="Lazi-Akademie Dashboard"> <img src="logo.svg" alt="Lazi-Akademie" height="32"> </a> </div>

<nav> <ul class="nav-list"> <li class="nav-section-header" aria-hidden="true">Hauptbereiche</li>

<li> <a href="/dashboard" aria-current="page" class="nav-item"> <svg aria-hidden="true" class="nav-icon"><!-- Dashboard Icon --></svg> <span class="nav-label">Dashboard</span> </a> </li>

<!-- Aufklappbarer Menüpunkt --> <li> <button type="button" class="nav-item nav-item-expandable" aria-expanded="false" aria-controls="kurse-submenu" > <svg aria-hidden="true" class="nav-icon"><!-- Kurse Icon --></svg> <span class="nav-label">Kurse</span> <svg aria-hidden="true" class="nav-chevron">▼</svg> </button> <ul id="kurse-submenu" class="nav-submenu" hidden> <li><a href="/kurse/ux" class="nav-subitem">UX Design</a></li> <li><a href="/kurse/ui" class="nav-subitem">UI Design</a></li> </ul> </li> </ul> </nav>

<!-- Sekundäre Aktionen (unten) --> <div class="sidebar-footer"> <a href="/einstellungen" class="nav-item"> <svg aria-hidden="true"><!-- Settings Icon --></svg> <span class="nav-label">Einstellungen</span> </a> </div> </aside> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann Sidebar, wann Top Navigation? Top Navigation eignet sich für Websites mit wenigen Hauptbereichen (5–7), bei denen horizontaler Platz nicht premium ist. Sidebar Navigation eignet sich für Anwendungen mit vielen Bereichen und Hierarchien (Dashboards, Admin-Panels, IDEs), bei denen Nutzer häufig zwischen Bereichen wechseln und die Navigation dauerhaft sichtbar sein soll.

Wie tief sollte die Navigationshierarchie in einer Sidebar sein? Maximal 2 Ebenen (Hauptpunkt + Unterpunkte) für optimale Usability. Drei Ebenen sind möglich, aber kognitiv anstrengend. Bei tieferen Hierarchien besser auf Breadcrumbs oder kontextuelle Navigation (Tabs im Content-Bereich) setzen. Tiefe Menüstrukturen deuten oft auf ein Informationsarchitektur-Problem hin.

Verwandte Einträge

• Navigation Bar
• Breadcrumb
• Accordion
• Tabs

Weiterführend

• Nielsen Norman Group – „Left Navigation vs. Top Navigation": nngroup.com
• Material Design 3 – Navigation Drawer: m3.material.io/components/navigation-drawer
• Apple Human Interface Guidelines – Sidebars: developer.apple.com/design/human-interface-guidelines/sidebars
• WAI-ARIA Authoring Practices – Navigation Landmark: w3.org/WAI/ARIA/apg