Context Menu

The Context Menu component is a versatile and interactive UI element designed to enhance user experience by providing a context-specific menu of actions or options. It makes uses of Bulma `.dropdown` classes to create a dropdown menu.

When to Use

Use the Context Menu component when you need to offer users a set of actions or options that are relevant to a specific context or element on the page. It is particularly useful for:

• Providing additional options for a selected item or element.
• Offering context-specific actions without cluttering the UI.
• Enhancing user interaction by displaying relevant choices based on the current context.

To activate the context menu the user must left click or press enter on the trigger element.

By default the menu will be positioned inline and will open to the bottom left of the trigger element on hover or stay open if the trigger element is clicked. The context menu also shows the icon fa-solid fa-ellipsis with no text by default. Both of these can be changed by setting the TriggerText and TriggerButtonCss parameters.

The menu can be configured to open in different directions by setting the RfContextMenu.DropDownPosition parameter. The menu can be positioned in the four corners based on RfContextMenu.Position parameter.

The ChildContent of the RfContextMenu component can contain any number of RfContextMenuItem and RfContextMenuLink components. The RfContextMenuDivider component can be used to create a divider between groups of menu items.

<RfContextMenu >
    <RfContextMenuItem>Some Text</RfContextMenuItem>
    <RfContextMenuItem>Some other text</RfContextMenuItem>
    <RfContextMenuDivider />
    <RfContextMenuLink Href="#">Link</RfContextMenuLink>
</RfContextMenu>

RfContextMenuItem

The RfContextMenuItem is used to add no interactive text to the menu. You can add any content you want inside the component including something that is interactive.

RfContextMenuLink

The RfContextMenuLink component supports the OnClick event as well as all the parameters of the <a> tag.

Menu Ids

Each RfContextMenu renders its menu with an id of the form context-menu-N and points the trigger's aria-controls at it. The number is unique for every instance in the app and stays the same for the life of the instance, so aria-controls always resolves to exactly one menu, even with many menus on one page. Treat the number as opaque: it is a per-process counter, not something to hard code in CSS or JavaScript. Target a menu through your own CssClass instead.

Dynamic / Lazy Loading

You can make the menu dynamically load items by binding to @bind-IsActive:after. However, you will have to set IsHoverable to false because the hover action is controlled by css and a event cannot be triggered on hover. In the same way you can add a the css class .is-loading to the TriggerButtonCss during the loading state to show a loading spinner.

Dynamic Loading Example

<RfContextMenu @bind-IsActive:after=@LoadContextMenu 
    TriggerButtonCss="@Rf.ClassWhen(("is-loading", IsLoaded))">
    @if(IsLoaded == true)
    {
        <RfContextMenuItem>Some Text</RfContextMenuItem>
        <RfContextMenuItem>Some other text</RfContextMenuItem>
        <RfContextMenuDivider />
        <RfContextMenuLink Href="#">Link</RfContextMenuLink>
    }
</RfContextMenu>

CSS Variables

RfContextMenu adds additional CSS variables applied at the root .dropdown.

CSS Variable	Value
--rf-position-spacing	0

Setting up RForge is simple. Follow the below steps to add RForge Blazor components to your project.

1. Install the Nuget package
2. Import the namespaces (optional)
3. Register RForge services
4. Include Bulma CSS

Install the Nuget Package

RForge Blazor components are installed via Nuget. There are two packages. One for the blazor app and one for the library if any.

Blazor Project Installation

Command Line

dotnet add package RForge.Blazor

Package Manager Console

Install-Package RForge.Blazor

Library Project Installation

This is optional but may be useful if you want to use common enums across the backend and frontend.

Command Line

dotnet add package RForge.Abstractions

Package Manager Console

Install-Package RForge.Abstractions

Import the namespaces

To simplify namespacing while using RForge, the package is designed with most all components sitting within the root RForge namespace.

You may want to include the following namespaces in your _import.razor for ease of use.

@using RForgeBlazor
@using RForgeBlazor.Services
@using RForge.Abstractions

Namespace	Purpose
RForgeBlaozr	Houses all of the blazor components.
RForgeBlaozr.Services	Houses interfaces you may need to communicate with certain components.
RForgeBlaozr.Abstractions	Common enums used through out the components.

Register RForge Services

In order for some components to work they must first have their services registered.

Open up Program.cs and add the following line before the var app = builder.Build();.

using RForgeBlazor;
//...
builder.Services.AddRfForgeBlazorServices();
//...
var app = builder.Build();
    

Include Bulma CSS

RForge makes use of Bulma CSS to stylize the components. Add / install Bulma and add the CSS file to the head. Link to download: Bulma releases.