---
title: Block Menu
docs:
  - route: /docs/components/block-context-menu
    title: Block Context Menu
    
  - route: https://pro.platejs.org/docs/components/block-menu
    title: Block Menu

  - route: https://pro.platejs.org/docs/components/block-context-menu
    title: Block Context Menu

---

<ComponentPreview name="block-menu-demo" />

<PackageInfo>

## Features

- Right-click on a block to open the menu.
- Allows you to perform actions on blocks such as turn into, duplicating or deleting.
- Customizable menu items and actions.
- Keyboard navigation

</PackageInfo>

## Installation

```bash
npm install @udecode/plate-selection @udecode/plate-node-id
```

## Usage

```tsx
import { BlockMenuPlugin } from '@udecode/plate-selection/react';
import { NodeIdPlugin } from '@udecode/plate-node-id';
```

```tsx
const plugins = [
  // ...otherPlugins,
  NodeIdPlugin,
  BlockSelectionPlugin.configure({
    options: {
      enableContextMenu: true,
    },
  }),
  BlockMenuPlugin.configure({
    render: { aboveEditable: BlockContextMenu },
  }),
]
```

- [BlockContextMenu](/docs/components/block-context-menu)

To control the opening of the context menu for specific elements, you can use the `data-plate-open-context-menu` attribute:

```tsx
<PlateElement data-plate-open-context-menu={false} {...props}>
  {children}
</PlateElement>
```

Generally, we only need to prevent right-clicking on the padding of the `<Editor />`.

## Examples

### Plate UI

Refer to the preview above.

### Plate Plus

<ComponentPreviewPro name="context-menu-pro" />

## Plugins

### BlockMenuPlugin

Block menu state management.

## API

### editor.api.blockMenu.hide

Hides the block menu.

### editor.api.blockMenu.show

Shows the block menu for a specific block.

<APIParameters>
  <APIItem name="id" type="'context' | string">
    The ID of the block to show the menu for.
  </APIItem>
  <APIItem name="position" type="{ x: number; y: number }" optional>
    The position to show the menu at.
  </APIItem>
</APIParameters>

### editor.api.blockMenu.showContextMenu

Shows the context menu for a specific block.

<APIParameters>
  <APIItem name="blockId" type="string">
    The ID of the block to show the context menu for.
  </APIItem>
  <APIItem name="position" type="{ x: number; y: number }">
    The position to show the context menu at.
  </APIItem>
</APIParameters>
