Skip to content
On this page

Slash Menu

The Slash Menu is the list of commands which shows up whenever you type the "/" (slash) character, or when you click the "+" button in the Side Menu:

image

Custom Slash Menu Item List

If you want to change the items that appear in the Slash Menu, you can do that using the slashMenuItems editor option.

You can see how this is done in the example below, which has a custom Slash Menu item list. It includes all the default Slash Menu items, as well as a custom item, which inserts a new block below with "Hello World" in bold.

To find out how to get the default Slash Menu items, as well as how to make custom items, read on to Slash Menu Items

Slash Menu Items

Default Items

BlockNote comes with a variety of built-in Slash Menu items, which are used to change the type of the block containing the text cursor. If you don't pass anything to slashMenuItems, BlockNote will use these to set the Slash Menu contents.

If you want to change, remove & reorder the default items , you first import and copy them to a new array. From there, you can edit the array how you like, then pass it to useBlockNote:

typescript
import {
  BlockNoteView,
  getDefaultReactSlashMenuItems,
  ReactSlashMenuItem,
  useBlockNote
} from "@blocknote/react";
import "@blocknote/react/style.css";

function App() {
  const newSlashMenuItems: ReactSlashMenuItem[] = 
    getDefaultReactSlashMenuItems();

  // Edit newSlashMenuItems
  ...

  const editor = useBlockNote({ slashMenuItems: newSlashMenuItems });

  return <BlockNoteView editor={editor} />;
}

Custom Items

Creating a custom Slash Menu item is easy! Just declare a plain JavaScript object with the following fields:

typescript
type SlashMenuItem = {
  name: string;
  execute: (editor: BlockNoteEditor) => void;
  aliases?: string[];
  group: string;
  icon: JSX.Element;
  hint?: string;
  shortcut?: string;
};

name: The item's name, which is the same string you see displayed in the menu, e.g. "Heading" or "Paragraph".

execute: A function that runs when the item is selected.

aliases: Other names for the item, used as shortcuts for search.

group: The name of the group the item belongs to, e.g. "Headings" or "Basic Blocks".

icon: The item's icon.

hint: A short phrase to describe what the item is for, which is displayed below its name.

shortcuts: A keyboard shortcut which can be used to run the item's execute function without the Slash Menu being open.