NavBar: Grundlagen

1. Übersicht und Zweck

Status: [Live]. Baut auf demselben Navigations-Grundsatz wie tree() auf (Links, kein clientseitiger Auswahlzustand).

2. Voraussetzungen

Keine über den bestehenden Helper-API-Kontrakt hinaus.

3. Konzepte

Flache Gruppen statt Rekursion: NavBar-Gruppen sind flach (Einträge haben keine eigenen Kinder) — im Gegensatz zu tree()-Knoten, die rekursiv verschachtelbar sind. Die Grundtechnik (Gruppierung ohne JavaScript über <details>) ist identisch zu propertyGrid()- Sektionen und tree()-Knoten mit Kindern — ein wiederkehrendes Muster in der ganzen Bibliothek.

4. Erste Schritte

echo $widgets->navBar([
    [
        'label' => 'Favoriten',
        'items' => [
            ['label' => 'Aufgaben', 'href' => wl($ID, ['ns' => 'aufgaben']), 'icon' => $iconStar],
            ['label' => 'Team',     'href' => wl($ID, ['ns' => 'team'])],
        ],
    ],
], ['persistKey' => 'sidebar:navbar']);

5. Verwendung

Der gruppenbasierte Sidebar-Inhaltstyp (s. Demo-Übersicht) — Alternative zu tree() für Sidebar-Inhalte ohne natürliche Hierarchie.

6. API-Referenz

navBar(array $groups, array $opts = []): string in helper_plugin_wkfluentui_widgets. Leerer String bei leerem $groups.

7. Parameter, Optionen und Zustände

Ebene	Schlüssel	Typ	Bedeutung
Gruppe	`label`	string	Gruppentitel (halbfett, Fieldset-Legenden-Optik wie bei propertyGrid() Sektionen)
Gruppe	`items`	array	Liste der Gruppen-Einträge
Gruppe	`collapsed`	bool	initial zugeklappt (analog zur Sektions-Kollaps-Persistenz von `propertyGrid()`)
Eintrag	`label`	string	Linktext
Eintrag	`href`	string	Ziel-URL
Eintrag	`icon`	string	optionales, vertrauenswürdiges Icon-HTML
Eintrag	`badge`	int/string	optionale Zähler-/Status-Markierung — rendert über `countBadge()` (eine Badge-Quelle in der Bibliothek)
Eintrag	`badgeLabel`	string	Screenreader-Text zum Badge (z. B. „3 ungelesen„) — eine nackte Zahl würde sonst als Teil des Linktexts vorgelesen
Eintrag	`active`	bool	markiert den aktuellen Eintrag (Klasse `–active` + `aria-current="page"`)
$opts	`persistKey`	string	Offen-Zustand der Gruppen überlebt Reloads (generische details-Persistenz in `scripts/propertygrid.js`, `localStorage` `wk-details:<persistKey>`)

Erzeugtes Markup: <nav class="wk-navbar"> → je Gruppe eine <details open>-Sektion (Kollaps ohne JavaScript), Einträge als <ul><li><a> innerhalb der Gruppe; jeder Link trägt aria-label und title mit seinem label (überlebt den Icon-Kollaps der Sidebar).

8. Vollständige Beispiele

echo $widgets->navBar([
    [
        'label' => 'Favoriten',
        'items' => [
            ['label' => 'Aufgaben', 'href' => wl($ID, ['ns' => 'aufgaben']), 'icon' => $iconStar],
            ['label' => 'Team',     'href' => wl($ID, ['ns' => 'team'])],
        ],
    ],
    [
        'label' => 'Module',
        'items' => [
            ['label' => 'Wiki', 'href' => wl($ID, ['ns' => 'wiki']), 'badge' => 3],
            ['label' => 'Blog', 'href' => wl($ID, ['ns' => 'blog'])],
        ],
    ],
], ['persistKey' => 'sidebar:navbar']);

9. Einschränkungen und Randfälle

Keine Rekursion (Abschnitt 3) — Einträge mit eigenen Kindern gehören stattdessen zu TreeView.

10. Accessibility und Kompatibilität

Vollständiger Überblick: Accessibility.

11. Troubleshooting

Entfällt.

12. Verwandte Themen

Demo-Übersicht — alle Kategorien
TreeView: Grundlagen — verwandte, aber hierarchische Alternative
Vertical Grid: Grundlagen — Vorbild der Gruppen-Kollaps-Technik