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, attributionTooltip). 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.

The mobile Formatting Toolbar always portals to document.body, including its menus and popovers. It does not use the configured formatting-toolbar or default target.

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.