Sidebar Navigation

Die sidebar Komponente stellt ein Navigationsfeld am Fensterrand bereit. Sie kann links, rechts oder beidseitig positioniert werden und unterstützt einen einklappbaren Drawer-Modus.

Block Tag
JavaScript

Funktionen

  • Position: Links, rechts oder beide Seiten gleichzeitig.

  • Drawer-Modus: Zusammenklappbar mit Öffnungs- und Schließfunktion.

  • Automatisches Schließen: Wird optional geschlossen, wenn der Mauszeiger das Fenster verlässt.

  • Mobile-Unterstützung: Kann bei kleineren Bildschirmgrößen ausgeblendet werden.

  • Kategorien: Ordnet Navigationselemente mithilfe von Icons und Badges in logische Gruppen ein.

HTML
JS

Verwendung

Die Sidebar wird über das sidebar Layout-Tag eingebunden. Das Base-Template verfügt über, für die Sidebar vorgesehenen Blöcke, in welchem diese platziert werden sollte. Es gibt einen Block für die rechte und einen für die linke Seite. Soll die Sidebar einklappbar sein, muss static=False gesetzt werden. Wenn die Komponente außerhalb dieser Blöcke verwendet wird, kann es zu Layoutproblemen kommen.

{% load layout_tags %} {% block sidebar_left %} {% sidebar %} {% include "components/sidebar_nav.html" with sidebar_data=nav_data %} {% endsidebar %} {% endblock sidebar_left %} {% block sidebar_right %} {% sidebar width="wide" %} <h2>Table of Contents</h2> <div id="toc"></div> {% endsidebar %} {% endblock sidebar_right %}

Parameter

Laden…

config (SidebarConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
side str

Position der Sidebar („left“ oder „right“). Wird automatisch anhand des Blockkontexts ermittelt.

 "right" False
static bool

Wenn True, ist die Sidebar fixiert; wenn False, wird diese als Drawer dargestellt (ein-/ausklappbar).

 True False
width str

Breite der Sidebar („narrow“, „normal“, „wide“).

 "normal" False
mobile_behavior str

Verhalten auf mobilen Viewports („hidden“, „drawer“).

 "hidden" False
sidebar_data

Inhalt für die Navigationsvariante (wird nur mit „sidebar_nav.html“ verwendet).

 None False
{# Basic usage inside sidebar blocks #} {% block sidebar_left %} {% sidebar %} {% include "components/sidebar_nav.html" with sidebar_data=nav_data %} {% endsidebar %} {% endblock %} {# With explicit parameters #} {% sidebar side="right" width="wide" mobile_behavior="drawer" %} <h2>Table of Contents</h2> <nav>...</nav> {% endsidebar %}

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Die Seitenleiste verwendet ein <aside>-Element mit role='complementary' für die Orientierungspunkte-Navigation.

  • Die Seitenleiste verfügt über ein aria-label, welches ihren Zweck beschreibt („Seitennavigation“).

  • Die Schaltflächen zum Öffnen und Schließen verfügen über beschreibende aria-label-Attribute.

  • Die Navigation nutzt eine semantische Struktur aus <nav> und verschachtelten <ul>/<li> Elementen.

  • Die Drawer Variante verfügt über eine Schließen-Button, welcher über die Tastatur bedient werden kann.

  • Durch Drücken der Escape-Taste wird der Drawer geschlossen.

WCAG AAA (Erweitert)

  • Die Fokus-Trapping wird aktiviert, wenn der Drawer geöffnet ist.

  • Der Fokus kehrt zum Auslöseelement zurück, wenn sich der Drawer geschlossen wird.

Offene Punkte

  • Dem inneren <nav> Element fehlt ein aria-label Attribut.

  • Aktiven Navigationselementen fehlt das Attribut aria-current='page'.

Verwandte Themen