Sidebar Navigation
Seitenleisten-Navigation
Die Seitenleisten-Navigation ist ein seitlicher Bereich mit benannten Links, der geöffnet bleiben oder eingeklappt werden kann. Sie gruppiert oft verwandte Orte in einem Produkt.
Ein echtes Beispiel
Ein Arbeitsbereich hat 18 Routen, die unter Übersicht, Berichte und Verwaltung gruppiert sind. Die Seitenleiste zeigt die Gruppen, die aktuelle Seite und eine kleinere Ansicht, die die Bezeichnungen beibehält. Aktionen für die aktuelle Seite gehören in eine Symbolleiste, nicht in die Seitennavigation.
Hauptteile
- 01Navigationslandmarke
- 02Zielgruppen
- 03Status der aktuellen Seite
Verwenden Sie es, wenn
Verwenden Sie diesen Begriff, wenn ein Produkt eine sichtbare, benannte Navigation über mehrere verwandte Orte benötigt.
Nutze es nicht, wenn
Verwenden Sie keine Seitenleiste auf einer einfachen Website mit nur wenigen Hauptlinks. Planen Sie bei schmalen Bildschirmen eine Drawer- oder eine andere kleine Layout-Lösung.
In Code verwendeter Name
<nav aria-label=Workspace> grouped links Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Seitenleisten-Navigation (Sidebar Navigation). User context: Ein Arbeitsbereich hat 18 Routen, die unter Übersicht, Berichte und Verwaltung gruppiert sind. Die Seitenleiste zeigt die Gruppen, die aktuelle Seite und eine kleinere Ansicht, die die Bezeichnungen beibehält. Aktionen für die aktuelle Seite gehören in eine Symbolleiste, nicht in die Seitennavigation. Recommended pattern: Seitenleisten-Navigation (Sidebar Navigation). Why it fits: Verwenden Sie diesen Begriff, wenn ein Produkt eine sichtbare, benannte Navigation über mehrere verwandte Orte benötigt. Do not use it when: Verwenden Sie keine Seitenleiste auf einer einfachen Website mit nur wenigen Hauptlinks. Planen Sie bei schmalen Bildschirmen eine Drawer- oder eine andere kleine Layout-Lösung. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Kein einziger offizieller Standard kontrolliert den gesamten Begriff. Seine Bedeutung kann sich zwischen Teams, Plattformen oder Frameworks ändern. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Seitenleisten-Navigation (Sidebar Navigation) is used now. Definition: Die Seitenleisten-Navigation ist ein seitlicher Bereich mit benannten Links, der geöffnet bleiben oder eingeklappt werden kann. Sie gruppiert oft verwandte Orte in einem Produkt. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.