NavBar: Adaptivity

Zurück: Demo-Übersicht

Bei eingeklappter Seitenleiste bleibt von jedem Eintrag das Symbol – die Beschriftung wandert in den Titel, damit die Leiste schmal wird, ohne unbedienbar zu werden.

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