VB Lüneburg-Heide, Maßgeschneiderter Header
Individuelles Header-Microfrontend mit drei Navigationsebenen für die Volksbank Lüneburg-Heide
Überblick
Der Custom Header für die Volksbank Lüneburg-Heide ist ein vollständig isoliertes Microfrontend, umgesetzt als Vue 3 Web Component mit Shadow DOM, und ersetzt den Atruvia-Standard-Header durch eine maßgeschneiderte Lösung. Die Microfrontend-Architektur ermöglicht es, den Header unabhängig vom Host-System zu entwickeln, zu testen und zu deployen, ohne in das Angular-Umfeld des Atruvia Content Managers einzugreifen. Die Shadow-DOM-Isolation garantiert dabei vollständige Style-Kapselung nach außen. Ein zentrales Feature ist die integrierte Suche: Ein animiertes Such-Flyout bietet Echtzeit-Vorschläge über eine angebundene Such-API, einen gespeicherten Suchverlauf sowie konfigurierbare Schnelleinstiege für die wichtigsten Seiten. Die dreistufige Navigation geht deutlich über den Atruvia-Standard hinaus: Alle drei Ebenen unterstützen horizontales Overflow-Scrolling mit individuellem Scrollbar-Styling. Barrierefreiheit war dabei kein optionales Add-on, ARIA-Labels, aria-current, semantisches HTML und vollständige Tastaturbedienbarkeit sind durchgängig umgesetzt und erfüllen WCAG 2.1. Der Header ist in drei optimierte Layouts aufgeteilt: Mobile mit Hamburger-Navigation und Flyout, ein tablet-spezifisches Layout mit separater Logo-Bar sowie Desktop mit vollständiger dreistufiger Horizontalnavigation. Technisch basiert der Baustein auf konsequenter BEM-Architektur und einem umfassenden CSS Custom Properties System, was den Header für weitere Volksbanken-Installationen einfach anpassbar macht.
Herausforderung
Entwicklung eines vollständig individuellen Header-Microfrontends mit drei Navigationsebenen, integrierter Suche und WCAG 2.1-Konformität, innerhalb der strikten technischen und gestalterischen Vorgaben der Atruvia-Plattform.
Lösung
Vue 3 Web Component (Microfrontend) mit Shadow DOM-Isolation, dreistufiger Navigation mit rekursivem Active-State-Tracking, Such-Flyout mit API-Anbindung sowie vollständig barrierefreier Umsetzung. Konsequente BEM-Architektur mit CSS Custom Properties für einfache Wiederverwendbarkeit.
Key Features
Drei Navigationsebenen
Horizontale Desktop-Navigation mit drei Ebenen, horizontalem Overflow-Scrolling und vollständigem Active-State-Tracking über alle Ebenen
Integrierte Suche
Such-Flyout mit Echtzeit-Vorschlägen über API-Anbindung, gespeichertem Suchverlauf und konfigurierbaren Schnelleinstiegen
Drei optimierte Layouts
Mobile Hamburger-Navigation, tablet-spezifisches Layout mit Logo-Bar und vollständige Desktop-Navigation, jeweils eigens optimiert
Barrierefreiheit
WCAG 2.1-konforme Umsetzung: ARIA-Labels, aria-current, semantisches HTML und vollständige Tastaturbedienbarkeit
CSS Custom Properties System
Umfassendes Variablen-System für Farben, Abstände, Typografie und Übergänge, macht den Header für weitere Volksbanken-Installationen leicht anpassbar
Composable Architektur
Mehrere eigenständige Sub-Components (SearchFlyout, Navigation, Titlebar) mit klarer Trennung von Verantwortlichkeiten
Project Gallery
