NavBar: Adaptivity

Zurück: Demo-Übersicht

Status: [Live].

NavBar-Basiskontrakt bereits verstanden.

Wie bei TreeView → Adaptivity gilt: bei kollabierter Sidebar (schmale Icon-Leiste, s. FluentUI: Admin-Bereich (vertieft)) reduziert sich jeder Eintrag auf sein icon.

Kein eigener Aufruf — das Verhalten folgt automatisch dem Sidebar-Kollaps-Marker .wk-shell-sidebar.is-collapsed.

Relevant, sobald die Sidebar auf kollabierte Icon-Breite reduziert wird.

Bei kollabierter Sidebar blendet das CSS Text, Badges und Gruppentitel aus — sichtbar bleibt nur das icon; label bleibt als title-Tooltip und aria-label am Link erhalten (immer gesetzt, s. Grundlagen → Markup). Gruppentitel entfallen im kollabierten Zustand vollständig (kein Platz für Fließtext auf 36–48 px Breite) — Gruppen bleiben nur als visueller Abstand zwischen Icon-Blöcken erkennbar.

Keine zusätzlichen $opts — das Verhalten folgt automatisch dem Sidebar-Kollaps-Zustand (s. FluentUI: Admin-Bereich (vertieft)).

Siehe Grundlagen — der Kollaps braucht keinen zusätzlichen Parameter.

• icon ist im kollabierten Zustand faktisch Pflicht — ein Eintrag ohne icon hat dort keine sichtbare Fläche (der Link bleibt per Tab erreichbar und über aria-label benannt, ist aber visuell leer). Einträge daher immer mit Icon ausstatten, wenn die Sidebar kollabierbar ist.

title-Tooltips allein sind für Screenreader unzuverlässig — s. Accessibility.

Entfällt.

• Demo-Übersicht — alle Kategorien
• TreeView: Adaptivity — identisches Kollaps-Prinzip