---
title: "Customizing menus in React Native PDF viewer | Nutrient SDK"
canonical_url: "https://www.nutrient.io/guides/react-native/user-interface/menus/"
md_url: "https://www.nutrient.io/guides/react-native/user-interface/menus.md"
last_updated: "2026-05-21T13:28:30.033Z"
description: "Customize the annotation selection menu in Nutrient SDK for React Native. Add custom menu elements and trigger callbacks for a tailored user experience."
---

# Customizing menus on React Native

When you select one or more annotations by tapping or right-clicking them on a page, Nutrient React Native SDK shows the annotation editing toolbar on Android and a popup menu on iOS. To use this feature, select an annotation and the toolbar or menu will be available by default. Read on to learn how you can customize annotation selection.

#### Android![Annotation Editing Toolbar](@/assets/guides/android/user-interface/contextual-toolbar/annotation-editing/annotation-editing-toolbar.png)

#### iOS

### Customizing the annotation selection menu

To insert a custom menu element into the annotation selection menu, add it to the `buttons` array inside the [`annotationContextualMenu`](https://www.nutrient.io/api/react-native/Annotation.html#.AnnotationContextualMenu) object when creating your [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) component. On Android, the `image` needs to be specified as a drawable resource, and on iOS, the `image` needs to be included in your application bundle.

The `id` is used to uniquely identify the button. Then, when the button is tapped, the `onCustomAnnotationContextualMenuItemTapped` callback is triggered. This can be any value; however, on Android, the `id` also needs to be specified as a resource item inside your application’s `ids.xml` file:

```xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="custom_annotation_item" type="id"/>
</resources>

```

The following example demonstrates how to add a custom menu element to the annotation selection toolbar or menu:

```typescript

<NutrientView
	document={DOCUMENT}
	annotationContextualMenu={{
		buttons: [
			{
				id: 'custom_annotation_item',
				image: 'example_annotation_icon',
				title: 'Custom', // Will be used on iOS. Omit to use image.
			},
		],
		retainSuggestedMenuItems: true,
	}}
	onCustomAnnotationContextualMenuItemTapped={(result: any) => {
		Alert.alert(
			'Nutrient',
			`Custom annotation menu item tapped: ${JSON.stringify(
				result,
			)}`,
		);
	}}
	ref={this.pdfRef}
	fragmentTag="PDF1"
/>

```

The customized toolbar or menu will look like the following image, which shows the custom button.

| Android                                                                                                                      | iOS                                                                                                                  |
| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
|  |  |

When the custom button is tapped, the `onCustomAnnotationContextualMenuItemTapped` callback will be called with the `id` you supplied during creation. The stock `Nutrient` buttons will execute their default actions without triggering the `onCustomAnnotationContextualMenuItemTapped` callback.

If you wish to show only your custom buttons and hide the suggested Nutrient buttons, you can set the `retainSuggestedMenuItems` property to `false`.

### Customizing the text selection menu

When you select text in a document, Nutrient shows a text selection menu with actions like copying text and creating text markup annotations. You can customize the items shown in this menu by providing the `textSelectionContextualMenu` prop when creating your [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) component.

To insert a custom menu element into the text selection menu, add it to the `buttons` array inside the `textSelectionContextualMenu` object. On Android, the `image` needs to be specified as a drawable resource, and on iOS, the `image` needs to be included in your application bundle.

The `id` is used to uniquely identify the button. Then, when the button is tapped, the `onCustomTextSelectionContextualMenuItemTapped` callback is triggered. This can be any value; however, on Android, the `id` also needs to be specified as a resource item inside your application’s `ids.xml` file:

```xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="custom_text_item" type="id"/>
</resources>

```

The configuration works the same way as `annotationContextualMenu`: Define your custom buttons in the `buttons` array, and use `retainSuggestedMenuItems` to control whether the default Nutrient actions should remain visible alongside your custom items.

The following example demonstrates how to customize the text selection menu by mixing built-in menu items with a custom menu element:

```typescript

<NutrientView
	document={DOCUMENT}
	textSelectionContextualMenu={{
		buttons: [
			Annotation.TextSelectionMenuItem.COPY,
			Annotation.TextSelectionMenuItem.HIGHLIGHT,
			{
				id: 'custom_text_item',
				image: 'example_annotation_icon',
				title: 'Text Action',
			},
		],
		retainSuggestedMenuItems: false,
	}}
	onCustomTextSelectionContextualMenuItemTapped={(result: any) => {
		Alert.alert(
			'Nutrient',
			`Custom text selection contextual menu item tapped: ${JSON.stringify(
				result,
			)}`,
		);
	}}
	ref={this.pdfRef}
	fragmentTag="PDF1"
/>

```

We don’t recommend ignoring the suggested menu or returning an empty menu. Doing so may break important functionality such as copying, modifying, and deleting annotations. Certain actions are only possible through the annotation selection menu.

For more details and sample code, see the [`AnnotationPresetCustomization.tsx` example](https://github.com/PSPDFKit/react-native/blob/master/samples/Catalog/examples/AnnotationPresetCustomization.tsx) from the [Catalog example project](https://www.nutrient.io/guides/react-native/prebuilt-solutions/example-projects.md#pspdfkit-catalog).
---

## Related pages

- [Show or hide the UI in our React Native viewer](/guides/react-native/user-interface/ui-visibility.md)
- [Customizing our PDF viewer in React Native](/guides/react-native/user-interface.md)
- [Configuring PSPDFKitView properties](/guides/react-native/user-interface/configuration.md)
- [Show the PSPDFKitView close button](/guides/react-native/user-interface/close-button.md)
- [NutrientView React Native UI component](/guides/react-native/user-interface/pspdfkitview.md)
- [Localization: Change languages in our React Native PDF viewer](/guides/react-native/user-interface/localization.md)