Navbar ist die im Entwicklungsumfeld übliche Kurzform für navigation bar, also für die waagerechte Menüleiste einer Website. Gemeint ist das Element, das Logo und Menüpunkte trägt und meist im Header sitzt. Im deutschen Sprachgebrauch heißt dasselbe Menüleiste.
- Navbar
Im Entwicklungsumfeld übliche Bezeichnung für die waagerechte Menüleiste einer Website.
Beispiel: „Die Navbar bleibt beim Scrollen am oberen Rand stehen.“Auch: Navigationsleiste. Verbreitet wurde die Kurzform durch CSS-Frameworks, die eine fertige Komponente dieses Namens mitbringen; in Entwurfsdateien und Tickets hat sie sich dadurch auch im deutschsprachigen Raum eingebürgert.
Abgrenzung zum Menü und zur Hauptnavigation: Das Menü ist die Liste der Links, die Navbar die Leiste, die sie zeigt. Gemeint ist dabei fast immer die Leiste der Hauptnavigation, auch wenn eine Website mehrere Menüs hat.
Was eine Navbar enthält
Links das Logo als Weg zur Startseite, rechts oder mittig die Menüpunkte, am Ende der Weg zur wichtigsten Handlung. Auf Websites mit Konto kommt der Zugang dazu, bei Shops der Warenkorb. Mehr passt auf einem Telefon ohnehin nicht nebeneinander.
Die Anordnung ist dabei erwartbar und sollte es bleiben. Ein Logo rechts außen mag gestalterisch reizvoll sein, kostet aber jeden Besucher einen Moment, weil er es links sucht.
Fixiert oder mitscrollend
Eine Navbar, die beim Scrollen stehen bleibt, hält die Wege dauerhaft erreichbar und kostet dafür Höhe auf jedem Bildschirm. Das lohnt sich bei langen Seiten, auf denen oft gewechselt wird, und weniger bei kurzen Seiten mit einem einzigen Ziel.
Eine Zwischenform schrumpft beim Scrollen: Das Logo wird kleiner, die Höhe nimmt ab, die Punkte bleiben. Wichtig ist dabei, dass der Wechsel ohne Springen abläuft, sonst verschiebt sich der Text unter dem Finger.
Barrierefreiheit der Leiste
Die Navbar ist ein nav-Element mit einer Liste darin, und der aktuelle Bereich wird über aria-current markiert. Bleibt die Leiste beim Scrollen stehen, braucht der Inhalt darunter einen Abstand, damit ein Sprung zu einem Anker nicht unter der Leiste landet.
Dafür gibt es in CSS die Eigenschaft scroll-margin-top, die genau diesen Abstand für Sprungziele vorsieht. Ohne sie verdeckt eine fixierte Leiste bei jedem Ankersprung die Überschrift, auf die gesprungen wurde.