Kontextmenü Demo

Kontextmenü

ContextMenu öffnet per Klick auf einen Trigger-Button. ContextMenuTrigger öffnet per Rechtsklick auf eine beliebige Fläche. Items via ContextMenuItem – inkl. Icons, Separatoren, Headern, Sub-Menüs und Navigation per Href.

Einfache Items

Default-Trigger (3-Punkte-Icon) oder eigener Button als Content.

Default (3-Punkte)

Text-Button, rechts

Primary, öffnet unten

Header & Gruppen

Nicht-klickbare Abschnitts-Header strukturieren das Menü. Disabled deaktiviert einzelne Items.

Mit Abschnitts-Headern

Disabled Items

Sub-Menüs

Verschachtelte ContextMenuItem-Elemente als ChildContent öffnen beim Hover ein Sub-Panel.

Hierarchisches Menü

Navigation per Href

Items mit Href navigieren direkt wie ein Link – kein OnClick nötig. Das Menü schließt sich trotzdem. Icon wird außerhalb des Links gerendert.

Interne Links

Externe Links

Mix: Href & OnClick

Rechtsklick – Einfache Items

Rechtsklick auf die Fläche öffnet das Menü an der Mausposition.

Basis-Aktionen

Rechtsklick – Sub-Menüs

Auch beim Rechtsklick-Menü sind Sub-Menüs per ChildContent möglich.

Datei-Optionen

Rechtsklick – Header & Gruppen

Abschnitts-Header und Separatoren funktionieren auch im Rechtsklick-Menü.

Bild-Optionen

Rechtsklick – Navigation per Href

Auch beim Rechtsklick-Menü können Items direkt navigieren.

Demo-Links

class & style

Alle Komponenten akzeptieren das native class- und style-Attribut.

class (ContextMenu)

style (ContextMenu)

class (ContextMenuTrigger)

style (ContextMenuTrigger)

SKILL.md – Contextmenu

---
name: ContextMenu
description: Onesown Blazor Komponente ContextMenu (Navigation). Verwende diesen Skill wenn du die ContextMenu-Komponente verwenden, konfigurieren oder debuggen moechtest.
---

# ContextMenu

**Namespace:** `Onesown.Blazor.Components`  
**Kategorie:** Navigation  
**Basisklasse:** `ContextMenuBase`  

Dropdown-Kontextmenü das durch Klick auf einen konfigurierbaren Trigger-Bereich geöffnet wird. Unterstützt verschachtelte Sub-Menüs via Hover und automatische Positionierung per JavaScript.

**Live-Demo:** https://components.schini.com/demo/contextmenu  

## Parameter

| Parameter | Typ | Standard | Beschreibung |
|---|---|---|---|
| ``Content`` | ``RenderFragment`` |  | Inhalt des Triggers (z.B. ein Button). Wenn leer, wird ein Standard-3-Punkte-Button gerendert. |
| ``Position`` | ``string`` | ``"bottom"`` | Öffnungsrichtung: top &#124; bottom &#124; left &#124; right. Standard: bottom. |

## Hinweise

- Trigger: <c>Content</c> bestimmt den klickbaren Bereich; ohne Content wird ein Standard-3-Punkte-Button gerendert
- Items: <c>ContextMenuContent</c> mit <c>ContextMenuItem</c>-Elementen befüllen
- Öffnungsrichtung: <c>Position="bottom"</c> (Standard) | <c>top</c> | <c>left</c> | <c>right</c>
- Sub-Menüs: <c>ChildContent</c> innerhalb eines <c>ContextMenuItem</c> für Hover-Sub-Panels
- Programmatisches Schließen: <c>Close()</c>-Methode öffentlich verfügbar
- Außen-Klick schließt das Menü automatisch via JS-Interop