UI Components

BlockNote includes a number of UI Components (like menus and toolbars) that can be completely customized:

• Block Side Menu
• Formatting Toolbar
• Suggestion Menus

Configuring Portal Targets

By default, the floating components (formatting toolbar, side menu, slash menu, table handles, etc.) portal into the element that wraps the editor: the editor's bn-container, or, when you render BlockNoteViewEditor yourself, the element you render it into. So they stay scoped to the editor and clip with it. The menus and popovers a floating component opens render inside that component's wrapper, so they move and hide with it. If your layout needs the floating components to escape, e.g. an overflow: hidden ancestor that would clip large dropdowns, or a host modal with its own stacking context, pass a portalElements prop to BlockNoteView:

<BlockNoteView
  editor={editor}
  portalElements={{
    // Global default for any element not listed below.
    default: document.body,
    // Per-element overrides. Values can be an HTMLElement or a CSS selector.
    tableHandles: ".bn-container",
  }}
/>

Keys mirror the default UI flags (formattingToolbar, linkToolbar, slashMenu, emojiPicker, sideMenu, filePanel, tableHandles, comments). Manually-mounted Controllers also accept a portalElement prop that takes precedence over the map. All keys, including default, update reactively. See the Portal Targets example.

When a target sits outside the editor's DOM (like document.body), BlockNote automatically renders a themed wrapper element inside it, so floating UI keeps the editor's styling and theming wherever it's portalled.