Block Side Menu

The Block Side Menu appears on the left side whenever you hover a block. By default, it consists of a + button and a drag handle (⠿):

Clicking the drag handle (⠿) in the Block Side Menu opens the Drag Handle Menu:

Changing the Block Side Menu

You can change or replace the Block Side Menu with your own React component. In the demo below, the button to add a new block is replaced with one to remove the hovered block.

We first define our custom RemoveBlockButton. The useComponentsContext hook gets all components used internally by BlockNote, so we want to use Components.SideMenu.Button for this.

We use the SideMenu component to create a custom Block Side Menu. By specifying its children, we can replace the default buttons in the menu with our own.

This custom Side Menu is passed to a SideMenuController, which controls its position and visibility (on the left side when you hover a block).

Setting sideMenu={false} on BlockNoteView tells BlockNote not to show the default Block Side Menu.

Changing Drag Handle Menu Items

You can also change the items in the Drag Handle Menu. The demo below adds an item that resets the block type to a paragraph.

Here, we use the SideMenu component but keep the default buttons (we don't pass any children). Instead, we pass our customized Drag Handle Menu using the dragHandleMenu prop.

Hover and Drop Areas

By default, the Block Side Menu shows only while the mouse is over the editor, including its padding, where the menu sits. A dragged block can still be dropped when it is up to 250px outside the editor. You can change both distances with the sideMenu editor option:

import { useCreateBlockNote } from "@blocknote/react";

const editor = useCreateBlockNote({
  sideMenu: {
    // Also show the menu up to 100px left or right of the editor.
    hoverMargin: 100,
    // Accept drops up to 400px outside the editor.
    dropMargin: 400,
  },
});

hoverMargin: How far left or right of the editor (in px) the mouse still shows the menu, for the block at the height of the mouse. Defaults to 0.

dropMargin: How far outside the editor (in px), on any side, a dragged block can still be dropped. The block goes to the nearest position in the editor. Defaults to 250.

To show the menu wherever a block can be dropped, set both to the same value.