---
name: FlyoutMenu
description: Onesown Blazor Komponente FlyoutMenu (Navigation). Verwende diesen Skill wenn du die FlyoutMenu-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# FlyoutMenu

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Navigation  
**Basisklasse:** `IAsyncDisposable`  

Horizontale oder vertikale Navigationsleiste mit aufklappbaren Flyout-Panels und beliebig tiefer Verschachtelung. Unterstützt automatische Aktivierung des passenden Items bei Navigation sowie Hover-Öffnung. Eignet sich für Top-Navigationen (Horizontal) und Sidebar-Menüs (Vertical).

**Live-Demo:** https://components.schini.com/demo/flyoutmenu  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``ChildContent`` | ``RenderFragment`` |  | Deklarativer Inhalt: direkte FlyoutMenuItem-Kindkomponenten als Alternative zu Items. |
| ``Items`` | ``List<FlyoutMenuItemModel>`` |  | Liste von Menü-Einträgen für programmatische Befüllung. Alternativ zu ChildContent. |
| ``Orientation`` | ``FlyoutMenuOrientation`` | ``FlyoutMenuOrientation.Horizontal`` | Ausrichtung der Root-Ebene. Horizontal = Menüleiste (Flyouts nach unten); Vertical = Sidebar (Flyouts nach rechts). Standard: Horizontal. |
| ``OpenOnHover`` | ``bool`` |  | Öffnet Flyout-Panels bereits beim Hovern über ein Item (ohne Klick). Standard: false. |
| ``AutoActivateOnNavigate`` | ``bool`` | ``true`` | Markiert das zur aktuellen URL passende Item automatisch als aktiv. Standard: true. |
| ``OnItemClick`` | ``EventCallback<FlyoutMenuItemModel>`` |  | Wird ausgelöst wenn ein Item (aus Items) geklickt wird. Liefert das geklickte FlyoutMenuItemModel. |
| ``IconOnly`` | ``bool`` |  | Zeigt auf Root-Ebene nur das Icon – Text und Pfeil werden ausgeblendet. |

## Hinweise

- Top-Navigation: <c>Orientation="FlyoutMenuOrientation.Horizontal"</c> (Standard) – Flyouts öffnen nach unten
- Sidebar: <c>Orientation="FlyoutMenuOrientation.Vertical"</c> – Flyouts öffnen nach rechts
- Programmatisch befüllen: <c>Items="DemoNavigation.FlyoutItems"</c> mit <c>List&lt;FlyoutMenuItemModel&gt;</c>
- Deklarativ: <c>ChildContent</c> mit <c>FlyoutMenuItem</c>-Elementen
- Hover-Öffnung: <c>OpenOnHover="true"</c> öffnet Flyouts bereits beim Darüberfahren
- Nur-Icon-Modus: <c>IconOnly="true"</c> zeigt auf Root-Ebene nur das Icon (für kompakte Sidebars)
- Automatische Aktivierung: <c>AutoActivateOnNavigate="true"</c> (Standard) markiert das URL-passende Item
- Programmatisches Schließen: <c>CloseAll()</c>-Methode öffentlich verfügbar