Blazor Context Menu

A context menu component for Blazor!

Samples / Demo

You can find a live demo here.

Installation

1. Add the nuget package in your Blazor project

> dotnet add package Blazor.ContextMenu

OR

PM> Install-Package Blazor.ContextMenu

Nuget package page can be found here.

2. Add the following line in your Blazor project's startup class

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddBlazorContextMenu();
    }
}

3. Add the following line in your _Imports.razor

@using BlazorContextMenu

4. Reference the static files

Add the following static file references in your _Host.cshtml (server-side blazor) or in your index.html (client-side blazor). Make sure that there is a call to app.UseStaticFiles(); in your server project's Startup.cs.

<link href="_content/Blazor.ContextMenu/blazorContextMenu.min.css" rel="stylesheet" />

<script src="_content/Blazor.ContextMenu/blazorContextMenu.min.js"></script>

Basic usage

<ContextMenu Id="myMenu">
    <Item OnClick="@OnClick">Item 1</Item>
    <Item OnClick="@OnClick">Item 2</Item>
    <Item OnClick="@OnClick" Enabled="false">Item 3 (disabled)</Item>
    <Seperator />
    <Item>Submenu
        <SubMenu>
            <Item OnClick="@OnClick">Submenu Item 1</Item>
            <Item OnClick="@OnClick">Submenu Item 2</Item>
        </SubMenu>
    </Item>
</ContextMenu>

<ContextMenuTrigger MenuId="myMenu">
    <p>Right-click on me to show the context menu !!</p>
</ContextMenuTrigger>

@code{
    void OnClick(ItemClickEventArgs e)
    {
        Console.WriteLine($"Item Clicked => Menu: {e.ContextMenuId}, MenuTarget: {e.ContextMenuTargetId}, IsCanceled: {e.IsCanceled}, MenuItem: {e.MenuItemElement}, MouseEvent: {e.MouseEvent}");
    }
}

Customization

Templates

You can create templates in the configuration that you can then apply to context menus.

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddBlazorContextMenu(options =>
        {
            options.ConfigureTemplate("myTemplate", template =>
            {
                template.MenuCssClass = "my-menu";
                template.MenuItemCssClass = "my-menu-item";
                //...
            });
        });
    }
}

<style>
    .my-menu { color: darkblue; }
    
    /* using css specificity to override default background-color */
    .my-menu .my-menu-item { background-color: #ffb3b3;}
    .my-menu .my-menu-item:hover { background-color: #c11515;} 
</style>

<ContextMenu Id="myMenu" Template="myTemplate">
    <Item>Item 1</Item>
    <Item>Item 2</Item>
</ContextMenu>

You can also change the default template that will apply to all context menus (unless specified otherwise).

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddBlazorContextMenu(options =>
        {
            //Configures the default template
            options.ConfigureTemplate(defaultTemplate =>
            {
                defaultTemplate.MenuCssClass = "my-default-menu";
                defaultTemplate.MenuItemCssClass = "my-default-menu-item";
                //...
            });

            options.ConfigureTemplate("myTemplate", template =>
            {
                template.MenuCssClass = "my-menu";
                template.MenuItemCssClass = "my-menu-item";
                //...
            });
        });
    }
}

Explicit customization

All components expose CssClass parameters that you can use to add css classes. These take precedence over any template configuration.

<ContextMenu Id="myMenu" CssClass="my-menu">
    <Item CssClass="red-menuitem">Red looking Item</Item>
    <Item>Default looking item</Item>
</ContextMenu>

Overriding default css

You can override the default css classes completely in the following ways (not recommended unless you want to achieve advanced customization).

Override default css using templates

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddBlazorContextMenu(options =>
        {
            //This will override the default css classes for the default template
            options.ConfigureTemplate(defaultTemplate =>
            {
                defaultTemplate.DefaultCssOverrides.MenuCssClass  = "custom-menu";
                defaultTemplate.DefaultCssOverrides.MenuItemCssClass= "custom-menu-item";
                defaultTemplate.DefaultCssOverrides.MenuItemDisabledCssClass = "custom-menu-item--disabled";
                //...
            });
        });
    }
}

Using the OverrideDefaultXXX parameters on components. These take precedence over the template overrides.

<ContextMenu Id="myMenu" OverrideDefaultCssClass="custom-menu">
    <Item OverrideDefaultCssClass="custom-menu-item" OverrideDefaultDisabledCssClass="custom-menu-item--disabled">Item 1</Item>
    <Item OverrideDefaultCssClass="custom-menu-item" OverrideDefaultDisabledCssClass="custom-menu-item--disabled">Item 2</Item>
</ContextMenu>

⚠️ Breaking changes ⚠️

<details open="open"><summary>Upgrading from 1.9.0 to 1.10.0</summary>

• The default auto-hide event is now on "mousedown". If you want the old behaviour, you can use the new AutoHideEvent parameter on the ContextMenu component to change it back to "mouseup".

</details> <details><summary>Upgrading from 0.19 to 0.20</summary>

• Replaced the ContextMenuTriggerId in events with the reference to the actual ContextMenuTrigger

</details> <details><summary>Upgrading from 0.16 to 0.17</summary>

• Removed the deprecated automatic embed of resources in blazor client-side. You must reference the static files as described in the "Installation" section.
• The static resources path has changed in preview 7 from _content/blazorcontextmenu/ to _content/Blazor.ContextMenu/

</details> <details><summary>Upgrading from 0.15 to 0.16</summary>

• Only for Blazor Server-Side projects: You must reference the static files as described in the "Installation" section.

</details> <details><summary>Upgrading from 0.12 to 0.13</summary>

• Remove the @addTagHelper *, BlazorContextMenu as it is no longer needed.

</details> <details><summary>Upgrading from 0.11 to 0.12</summary>

• The following handlers are removed as they are no longer needed: ClickAsync, EnabledHandlerAsync, VisibleHandlerAsync.
• The Click handler has been renamed to OnClick to keep consistency with the framework/suggested event names.
• The MenuItemClickEventArgs class has been renamed to the more appropriate ItemClickEventArgs.
• The EnabledHandler and VisibleHandler parameters have been removed and replaced with the new OnAppearing event handler.
• The MenuItemEnabledHandlerArgs and MenuItemVisibleHandlerArgs classes have been removed and replaced with the new ItemAppearingEventArgs.

</details> <details><summary>Upgrading from 0.10 to 0.11</summary>

• The CssOverrides API is removed and override configuration is moved into templates. The DefaultCssOverrides of the ConfigureTemplate API must be used.

</details> <details><summary>Upgrading from 0.5 to 0.6</summary>

• You must add in Startup.ConfigureServices of your Blazor client side project the following line services.AddBlazorContextMenu();
• The BlazorContextMenu.BlazorContextMenuDefaults API is removed. Use the API provided in the service configuration.

</details> <details><summary>Upgrading from 0.1 to 0.2</summary>

• Rename "MenuItem" to "Item".
• Rename "MenuSeperator" to "Seperator".
• Replace "MenuItemWithSubmenu" with a regular "Item" component.

</details>

Release Notes

<details open="open"><summary>2.1</summary>

• Fix for #155. Contributed by adrien426.

</details> <details><summary>2.0</summary>

• Upgrade to dotnet 8.0

</details> <details><summary>1.17</summary>

• Upgraded asp .net packages dependencies to 6.0.25 due to security concerns.

</details> <details><summary>1.16</summary>

• Fixes issue with opening a contextual menu on the far right side of the window for the first time not properly offsetting. Contributed by matt-virtualitics.

</details> <details><summary>1.15</summary>

• Add IsMenuShown to BlazorContextMenuService. Contributed by Adam Ashton.

</details> <details><summary>1.14</summary>

• Fix for #121.

</details> <details><summary>1.13</summary>

• Fix for #114.

</details> <details><summary>1.12</summary>

• Fix for #110. Contributed by [SebastianWachsmut