@page "/contextmenu"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Blazor ContextMenu
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    The Blazor ContextMenu opens a right-click menu of actions anywhere in your app via ContextMenuService.
</RadzenText>

<HelpPrerequirements />

<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Use <code>ContextMenuService</code> to open and close context menus.
</RadzenText>

<RadzenText Anchor="contextmenu#contextmenu-with-items" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-8">
    Show ContextMenu with items
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Create a context menu with menu items that appear when right-clicking on an element.
</RadzenText>
<RadzenExample ComponentName="ContextMenu" Example="ContextMenuDefault">
    <ContextMenuDefault />
</RadzenExample>

<RadzenText Anchor="contextmenu#contextmenu-with-custom-content" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Show ContextMenu with custom content and separator
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use custom templates and separators to create rich context menu experiences with icons, badges, and dividers.
</RadzenText>
<RadzenExample ComponentName="ContextMenu" Example="ContextMenuCustomContent">
    <ContextMenuCustomContent />
</RadzenExample>

<RadzenText  Anchor="contextmenu#contextmenu-for-html-element" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Show ContextMenu for HTML element
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Attach a context menu to any HTML element using the <code>ContextMenuService</code> and element reference.
</RadzenText>
<RadzenExample ComponentName="ContextMenu" Example="ContextMenuHTMLElement">
    <ContextMenuHTMLElement />
</RadzenExample>