Footer Navigation

Die footer Komponente rendert eine dreispaltige Fußzeile mit anpassbarem Inhalt. Sie enthält in der Regel Navigationslinks, Kontaktdaten, rechtliche Hinweise und Copyright-Informationen.

Der Footer nutzt die wiederverwendbare legal_notice Komponente für die rechtlichen Hinweise.

WCAG AA

Funktionen

  • Spalte „Beschreibung“: Zusammenfassung der Anwendung mit optionalem Logo.

  • Navigationslinks: Schnellzugriff auf wichtige Seiten.

  • Kontaktdaten: Links zu E-Mail, Impressum und Datenschutzerklärung.

  • Rechtliche Hinweise: Informationen zu Urheberrecht, Lizenzen und Rechten.

  • Versionsanzeige: Optionale Anwendungsversion.

HTML

Verwendung

Der Footer wird über das footer Tag eingebunden. Das Base-Template verfügt über einen, für den Footer vorgesehenen Block. Damit der Footer auch garantiert immer am Ende der Webseite erscheint, sollte dieser in vorgesehenen Block gepackt werden.

{% load insight_tags %} {% block footer %} {% footer config=footer_config %} {% endblock footer %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
description

Kurzbeschreibung der Anwendung mit optionalen Bild.

 None False
links

Liste der Hauptnavigationspunkte der Anwendung.

 [] False
contact

Kontaktinformationen, Link zum Impressum, Datenschutz und eine Kontaktmailadresse.

 None False
legal

Rechtliche Hinweise mit Angaben zu Urheberrecht, Lizenz und Version.

 None False
version str

Angabe zur aktuellen Version.

 "" False
FooterConfig( description=FooterDescriptionConfig( title="My App", text="A modern web application.", ), links=[ NavbarLinkConfig(text="Home", request_url=reverse("index")), NavbarLinkConfig(text="Docs", request_url="https://docs.example.com"), ], contact=FooterContactConfig( mail_url="[email protected]", imprint="/imprint/", privacy="/privacy/", ), legal=LegalNoticeConfig( year=2026, holder="My Company", ), version="v1.0.0", )

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Die Fußzeile verwendet das semantische Element <footer> mit der Eigenschaft role='contentinfo' für die Orientierungsnavigation.

  • Die Spaltenüberschriften enthalten <h4>-Tags, damit ein Screenreader zwischen ihnen navigieren kann.

  • Die Auflistung der Links verwendet ein semantisch korrektes <ul> Tag mit entsprechenden <li> Tags.

Verwandte Themen