Blazor Context Menu - Responsive Graphical UI Component

Overview

The Blazor Context Menu is a graphical user interface component that appears when users right-clicks or performs a touch and hold action. You can add a list of items to the context menu, create multilevel menus, and attach event handlers to the menu items for seamless integration with other controls.

Multi-level nesting

Define multiple levels of items inside the menu. You can browse the sub menus by mouse hover/clicking the menu items. The appearance of context menu varies for desktop and mobile apps. In mobile devices, users can view multilevel nested items in a single layer with a provision for backtracking to parent node.

Built-in themes

The Blazor Context Menu supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Web accessibility

• Fully supports WAI-ARIA for working with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, UI visual elements such as foreground color, background color, line spacing, text, and images are designed.
• Supports right-to-left text direction for users working with RTL languages like Hebrew, Arabic, or Persian.

Blazor Context Menu Code Example

Easily get started with the Blazor Context Menu using a few simple lines of C# code example as demonstrated below. Also explore our Blazor Context Menu Example that shows you how to render and configure the Context Menu in Blazor.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Navigations

<div class="contextmenu-control">
   <div id="contextmenutarget" tabindex="0">Right click or touch hold to open the context  menu.</div>
      <SfContextMenu Target="#contextmenutarget" TValue="MenuItem">
         <MenuItems>
            <MenuItem Text="Cut"></MenuItem>
            <MenuItem Text="Copy"></MenuItem>
            <MenuItem Text="Paste">
         <MenuItems>
            <MenuItem Text="Paste Text"></MenuItem>
            <MenuItem Text="Paste Special"></MenuItem>
         </MenuItems>
         </MenuItems>
            <MenuItem Separator="true"></MenuItem>
            <MenuItem Text="Link"></MenuItem>
            <MenuItem Text="New Comment"></MenuItem>
         </MenuItems>
      </SfContextMenu>
   </div>
</div>