Navbar Navigation

The navbar component provides a fixed navigation bar at the top of the page. It stays visible while scrolling and supports various navigation elements.

WCAG AA
WCAG AAA
HTMX

Funktionen

  • Marke: Logo und Titel am linken Rand.

  • Navigationslinks: Hauptnavigationselemente mit optionalen Icons und Dropdown-Menüs.

  • Suchleiste: Optionale Suchfunktion mit Unterstützung für HTMX oder Fuse.js.

  • Benutzermenü: Optionales Dropdown-Menü für angemeldete Benutzer oder Anmelde-Schaltfläche.

  • Sprachauswahl: Optionales Menü zum Wechseln der Anzeigesprache.

  • Design-Umschaltung: Optionale Schaltfläche zum Wechseln zwischen hellem und dunklem Design.

HTML

Verwendung

Die Navbar wird über das navbar Tag eingebunden. Das Base-Template verfügt über einen, für die Navbar vorgesehenen Block, in welchem diese platziert werden sollte, um die korrekte Funktionsweise zu gewährleisten.

{% load insight_tags %} {% block navbar %} {% navbar config=nav_config %} {% endblock navbar %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
brand

Beschreibt das Markenzeichen der Anwendung in der Navbar.

 None False
links

Enthält und beschreibt die Navigationspunkte der Navbar.

 [] False
search_bar

Konfiguration für die Suchleiste. Wenn „None“ angegeben ist, wird keine Suchleiste angezeigt.

 None False
usermenu

Konfiguration für das Benutzer-Dropdown-Menü. Bei None werden die Standardeinstellungen verwendet (nur Abmelden).

 None False
hide_login bool

Wenn „True“, wird der Anmelde-Button für nicht authentifizierte Benutzer ausgeblendet.

 False False
show_language_selector bool

Zeigt ein Dropdown-Menü zum Auswählen der Anzeigesprache (sofern definiert).

 False False
show_theme_toggle bool

Zeigt ein Button zum Wechsel zwischen der hellen und der dunklen Darstellung der Seite.

 False False
NavbarConfig( brand=NavbarBrandConfig( request_url=reverse("index"), mark=BrandMarkConfig( primary_text="My App", logo=LogoConfig(url="img/logo.svg", height="2rem"), ), ), links=[ NavbarLinkConfig(text="Home", request_url=reverse("index")), NavbarLinkConfig(text="About", request_url=reverse("about")), NavbarLinkConfig(text="Admin", request_url=reverse("admin:index"), staff_only=True), ], search_bar=SearchBarConfig( placeholder="Search...", enable_search=True, ), usermenu=UserMenuConfig( links=[ UserMenuLinkConfig(text="Profile", request_url=reverse("profile")), ], ), show_theme_toggle=True, )

Barrierefreiheit

WCAG AA WCAG AAA
Status

WCAG AA (Grundlagen)

  • Ein Sprunglink vor der Navigation ermöglicht es Benutzern, welche mit der Tastatur navigieren, direkt zum Hauptinhalt zu springen.

  • Das <nav> Element verfügt über die Attribute role='navigation' und aria-label zur Kennzeichnung von Orientierungspunkten.

  • Der Switch für das mobile Menü verfügt über die Attribute aria-expanded, aria-controls und aria-label.

  • Aktive Navigationslinks verwenden aria-current='page'.

  • Externe Links enthalten aus Sicherheitsgründen das Attribut rel='noopener'.

  • Der Link des Logos verwendet bei entsprechender Konfiguration aria-label für eine barrierefreie Benennung.

Verwandte Themen