Context Menu in Blazor PDF Viewer

17 Jul 20268 minutes to read

The Blazor PDF Viewer provides a customizable context menu that appears when users interact with document elements. This guide explains the context menu feature, available options, and how to configure it for your application.

Understanding the Context Menu

The context menu is a right-click menu that displays relevant actions based on the element being interacted with in the document. Users can perform operations such as copying, pasting, deleting, and managing annotations directly from this menu.

Key Capabilities

The context menu in Blazor PDF Viewer supports the following:

  • Enable or Disable: Toggle the context menu availability using the EnableContextMenu property.
  • Trigger Action: Choose between right-click, mouse-up, or None to display the menu.
  • Customize Menu Items: Select which menu items should appear in the context menu.
  • Default Items: Provides standard actions (Copy, Cut, Paste, Delete, Comment) and annotation markup options (Highlight, Underline, Strikethrough, Squiggly).

Available Context Menu Items

The Blazor PDF Viewer context menu supports the following built-in items, which are defined using the ContextMenuItem enum.

Item Description
Copy Copies the selected element (text, annotation, or form field) to the clipboard.
Cut Removes and copies the selected element to the clipboard.
Paste Pastes a previously copied or cut element.
Delete Permanently removes the selected element from the document.
Comment Opens the comment panel to add or view comments on annotations.
Highlight Applies highlight markup to selected text.
Underline Applies underline markup to selected text.
Strikethrough Applies strikethrough markup to selected text.
Squiggly Applies squiggly underline markup to selected text.
Properties Opens the properties dialog for the selected element (e.g., form fields).
ScaleRatio Displays scale ratio options for measurement annotations, allowing the user to set the measurement scale used by the PDF document.

The context menu adapts its items based on the selected element. The following screenshots show the context menu in different scenarios:

  • On Text Selection: Displays text annotation options

    context menu on text

  • On Annotation: Provides annotation management options

    context menu on annotation

  • On Form Fields: Shows form field operations (Designer mode only)

    context menu on form fields

  • On Empty Space: Displays paste and general options

    context menu on empty space

Enable or Disable the Context Menu

By default, the context menu is enabled in the Blazor PDF Viewer. You can control its availability using the EnableContextMenu property within PdfViewerContextMenuSettings.

Basic Configuration

To display the context menu with default settings, add the PdfViewerContextMenuSettings component to your PDF Viewer:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

<div class="control-section">
    <SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                  Height="100%"
                  Width="100%">
        <PdfViewerContextMenuSettings EnableContextMenu="true"></PdfViewerContextMenuSettings>
    </SfPdfViewer2>
</div>

Default context menu enabled

Customize Context Menu Items

You can control which menu items appear in the context menu by specifying a list of ContextMenuItem values in the ContextMenuItems property.

Show Only Specific Menu Items

The following example displays only Copy and Paste options in the context menu:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

<div class="control-section">
    <SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                  Height="100%"
                  Width="100%">
        <PdfViewerContextMenuSettings ContextMenuItems="contextMenuItems"></PdfViewerContextMenuSettings>
    </SfPdfViewer2>
</div>

@code {
    private List<ContextMenuItem> contextMenuItems = new List<ContextMenuItem>()
    {
        ContextMenuItem.Copy,
        ContextMenuItem.Paste
    };
}

Custom context menu with Copy and Paste items

Change the Context Menu Trigger Action

By default, the context menu appears on a right-click action. You can change this behavior using the ContextMenuAction property to trigger the menu on mouse-up or disable it entirely.

Trigger on Mouse-Up Instead of Right-Click

The following example configures the context menu to appear on mouse-up:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

<div class="control-section">
    <SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                  Height="100%"
                  Width="100%">
        <PdfViewerContextMenuSettings ContextMenuAction="ContextMenuAction.MouseUp"></PdfViewerContextMenuSettings>
    </SfPdfViewer2>
</div>

Disable the Context Menu Entirely

To prevent the context menu from appearing, set the ContextMenuAction property to None:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

<div class="control-section">
    <SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                  Height="100%"
                  Width="100%">
        <PdfViewerContextMenuSettings ContextMenuAction="ContextMenuAction.None"></PdfViewerContextMenuSettings>
    </SfPdfViewer2>
</div>

Complete Context Menu Configuration Example

The following example demonstrates how to configure the context menu using the
PdfViewerContextMenuSettings API, including
EnableContextMenu,
ContextMenuAction, and
ContextMenuItems properties.

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SfPdfViewer

<div class="control-section">
    <SfPdfViewer2 DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                  Height="100%"
                  Width="100%">
        <PdfViewerContextMenuSettings ContextMenuAction="ContextMenuAction.RightClick"
                                      ContextMenuItems="contextMenuItems"
                                      EnableContextMenu="true">
        </PdfViewerContextMenuSettings>
    </SfPdfViewer2>
</div>

@code {
    private List<ContextMenuItem> contextMenuItems = new List<ContextMenuItem>()
    {
        ContextMenuItem.Copy,
        ContextMenuItem.Cut,
        ContextMenuItem.Paste,
        ContextMenuItem.Delete,
        ContextMenuItem.Highlight,
        ContextMenuItem.Underline,
        ContextMenuItem.Strikethrough,
        ContextMenuItem.Squiggly,
        ContextMenuItem.Comment,
        ContextMenuItem.Properties
    };
}

After completing this configuration, the context menu will appear with all the specified items when users right-click on document elements.

See also