@page "/contextmenu"
@page "/docs/guides/components/contextmenu.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    ContextMenu
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>ContextMenu</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    These demos show context menus triggered by right-clicking elements, using the <code>ContextMenuService</code> to display menu items, custom content with separators, and menus attached to HTML elements via <code>oncontextmenu</code> handlers.
</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>