Explore how to tailor context menus for PDF pages, annotations, and form fields in this sample.
Properties
| Hide Default Context Menu | |
| Add Custom option at bottom |
This customization empowers users to add new context menus on PDF pages, annotations, and form fields. In this sample: Selecting text on pages reveals a custom context menu, enabling users to search for the selected text on Google. Annotations and Form Fields can be locked directly from the context menu. Customization is achieved using the following APIs: Customize the context menu by selectively displaying custom options, hiding existing menu items, controlled by boolean parameters in the addCustomMenu() method. Position custom menu items either above or below existing ones, adjusting boolean parameters in the addCustomMenu() method. Tailor the visibility of custom menu items using the customContextMenuBeforeOpen event. Implement specific functionalities for custom options through the customContextMenuSelect event. More information on the PDF Viewer instantiation can be found in this documentation section. .flex-container { display: flex; justify-content: flex-end; } .render-mode-info { background: none; border: none; padding-left: 0px; } .render-mode-info .render-mode-info-icon { height: 16px; width: 16px; } .switchLabel { font-family: "Segoe UI", "GeezaPro", "DejaVu Serif", sans-serif; font-weight: 400; line-height: 20px; letter-spacing: 0.24px; text-align: right; font-size: 14px; } .render-mode-info .render-mode-info-icon::before { line-height: 0.5rem; } .buttonSwitch { Width: 40px; Height: 24px; } .property-section-pdfviewer{ padding: 20px 15px; } .pdfviewer-contextmenu-checkbox-label{ padding: 10px; } .pdfviewer-control-section { border-right: 1px solid #D7D7D7; } .pdfviewer-property-container{ padding-bottom: 30px; }