CollapseNavMenu Demo

CollapseNavMenu

Hierarchisches Panel-Menü mit unbegrenzter Verschachtelung, Session-Persistenz und Deep-Link-Support.

Tiefe Verschachtelung (4 Ebenen)

Items können beliebig tief verschachtelt werden. Jede Ebene rückt automatisch ein.

Gruppen-Header

Nicht-klickbare Abschnittsüberschriften strukturieren das Menü. Auch bei Unteritems einsetzbar.

Separator

Ein reines Separator-Item (kein Text, kein Icon) rendert ausschließlich als Trennlinie. Mit Inhalt erscheint die Linie oberhalb.

Freier Item-Inhalt (ContentTemplate)

Jedes Item kann über ContentTemplate beliebige Komponenten aufnehmen – z. B. Badges oder Buttons.

Programmatisch befüllt

Das Menü kann statt statischer Deklaration auch über einen List<CollapseNavMenuItemModel> befüllt werden.

Programmatische Steuerung

Über die öffentliche API (ExpandAsync, CollapseAllAsync, SetActiveAsync) lässt sich der Zustand von außen steuern.

Session-Persistenz

Mit SaveStateName wird der aufgeklappte Zustand in der Session gespeichert und beim Zurückkehren wiederhergestellt.

Deep-Link

Mit UseDeepLink="true" werden die ausgeklappten IDs als ?cnav=... in die URL geschrieben – ein Link öffnet beim Empfänger denselben Zustand.

class & style

class

style

SKILL.md – Collapsenavmenu

---
name: CollapseNavMenu
description: Onesown Blazor Komponente CollapseNavMenu (Navigation). Verwende diesen Skill wenn du die CollapseNavMenu-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# CollapseNavMenu

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Navigation  
**Basisklasse:** `IDisposable`  

Hierarchisches Sidebar-Navigationsmenü mit ein-/ausklappbaren Gruppen, Session-Persistenz des Expand-Zustands und automatischer Aktivierung des passenden Items bei Navigation. Unterstützt programmatische Befüllung via Items oder deklarative Verwendung mit CollapseNavMenuItem-Kindkomponenten.

**Live-Demo:** https://components.schini.com/demo/collapsenavmenu  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``ChildContent`` | ``RenderFragment`` |  | Deklarativer Inhalt: direkte CollapseNavMenuItem-Kindkomponenten als Alternative zu Items. |
| ``Items`` | ``List<CollapseNavMenuItemModel>`` |  | Liste von Menü-Einträgen für programmatische Befüllung. Alternativ zu ChildContent. |
| ``AllowMultipleExpanded`` | ``bool`` | ``true`` | Erlaubt mehrere gleichzeitig ausgeklappte Gruppen. false = Akkordeon-Modus (nur eine Gruppe offen). Standard: true. |
| ``AutoActivateOnNavigate`` | ``bool`` | ``true`` | Markiert das zum aktuellen URL-Pfad passende Item automatisch als aktiv. Standard: true. |
| ``UseDeepLink`` | ``bool`` |  | Kodiert Expand- und Aktivzustand in die URL-Query-Parameter für teilbare Deep-Links. Standard: false. |
| ``SaveStateName`` | ``string`` |  | Schlüssel für SessionStorage-Persistenz von Expand- und Aktivzustand. Leer = kein Speichern. |
| ``OnItemClick`` | ``EventCallback<CollapseNavMenuItemModel>`` |  | Wird ausgelöst wenn ein Menü-Item (aus Items) geklickt wird. Liefert das geklickte CollapseNavMenuItemModel. |

## Hinweise

- Programmatisch: <c>Items="DemoNavigation.Items"</c> übergibt eine <c>List&lt;CollapseNavMenuItemModel&gt;</c>
- Deklarativ: <c>ChildContent</c> mit <c>&lt;CollapseNavMenuItem&gt;</c>-Elementen direkt in der Komponente
- Session-Persistenz: <c>SaveStateName="mein-nav"</c> speichert Expand- und Aktivzustand im SessionStorage
- Deep-Link: <c>UseDeepLink="true"</c> kodiert den Zustand in die URL-Query-Parameter
- Mehrere gleichzeitig offen: Standard <c>AllowMultipleExpanded="true"</c>; auf false für Akkordeon-Verhalten
- Automatische Aktivierung: <c>AutoActivateOnNavigate="true"</c> (Standard) markiert das Item passend zur aktuellen URL
- Programmatisches Steuern: <c>ExpandAsync</c>, <c>CollapseAsync</c>, <c>SetActiveAsync</c> und <c>CollapseAllAsync</c>