Menus

Compose Menu and ContextMenu independently. Keep named parts for packaged command state and behavior.

Use ContextMenu.Slot with a slotId, such as format.clear, for a packaged command. It takes its label, icon, enabled state, and command from the editor. Use ContextMenu.Item for application actions, and Submenu to group them. Menu.Item takes slotId in the same way. Use named toolbar parts for controls that collect values.

Context changes determine which commands the editor enables. A hidden control does not block the corresponding operation.

Menu configuration reference

Customize the DOCX editor menu bar and context menu independently. Both use the same command state and menu row components.

Set context menu disabled to restore the browser context menu. Set preset={false} to render your chosen menu arrangement. A named menu child replaces its menu in place. Other child menus append to the bar. The built-in menus are File, Format, Insert, Review, and Help.

File operation behavior

Changing menu labels does not change converter behavior. A missing export handler produces an error when the user requests that conversion. Hiding export progress through popups.export does not cancel conversion.

Menu part options

Use title to explain why a menu row is disabled. Use shortcut only when your application or the editor handles that shortcut. The context menu includes selection, clipboard, table, and table-of-contents actions where the engine allows them. Browser clipboard access can refuse Paste. Keep the supplied refusal feedback.

Keyboard and selection behavior

The built-in menus manage keyboard navigation, Escape, dismissal, and selection protection. A custom row inside a menu retains that menu behavior. If you build a separate menu from hooks, implement accessible keyboard navigation and focus restoration. Keep engine refusal checks for operations that edit the document.

React and Vue reference

Pass your DOCX bytes and loaded fonts to this component. The preview uses a fictional contract.

import { DocxEditor, type DocxEditorRootProps } from '@docx-editor.dev/react';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/react';
import '@docx-editor.dev/core/styles/editor.css';

const modules = [reviewModule()];

export function ContractEditor({
  bytes,
  fonts,
}: {
  bytes: Uint8Array;
  fonts: DocxEditorRootProps['fonts'];
}) {
  return (
    <div className="docx-editor contract-workspace">
      <DocxEditor.Root
        document={bytes}
        fonts={fonts}
        modules={modules}
        author="Demo reviewer"
        mode="suggesting"
        reviewDisplayMode="all-markup"
      >
        <DocxEditor.Menu />
        <DocxEditor.Viewport style={{ height: 520 }}>
          <DocxEditor.Content />
          <DocxEditor.HyperLink />
          <DocxEditor.ContextMenu preset={false}>
            <DocxEditor.ContextMenu.Cut />
            <DocxEditor.ContextMenu.Copy />
            <DocxEditor.ContextMenu.Slot slotId="format.clear" />
          </DocxEditor.ContextMenu>
          <DocxEditorReview />
        </DocxEditor.Viewport>
      </DocxEditor.Root>
    </div>
  );
}

<script setup lang="ts">
import { DocxEditor } from '@docx-editor.dev/vue';
import { reviewModule, DocxEditorReview } from '@docx-editor.dev/pro/vue';
import type { FontConfigurationFragment } from '@docx-editor.dev/vue';
import '@docx-editor.dev/core/styles/editor.css';

defineProps<{ bytes: Uint8Array; fonts: FontConfigurationFragment }>();
const modules = [reviewModule()];
</script>

<template>
  <div class="docx-editor contract-workspace">
    <DocxEditor.Root
      :document="bytes"
      :fonts="fonts"
      :modules="modules"
      author="Demo reviewer"
      mode="suggesting"
      review-display-mode="all-markup"
    >
      <DocxEditor.Menu />
      <DocxEditor.Viewport :style="{ height: '520px' }">
        <DocxEditor.Content />
        <DocxEditor.HyperLink />
        <DocxEditor.ContextMenu :preset="false">
          <DocxEditor.ContextMenu.Cut />
          <DocxEditor.ContextMenu.Copy />
          <DocxEditor.ContextMenu.Slot slot-id="format.clear" />
        </DocxEditor.ContextMenu>
        <DocxEditorReview />
      </DocxEditor.Viewport>
    </DocxEditor.Root>
  </div>
</template>

Remove a packaged row

Render the row's slot with hidden. A named row part is shorthand for the same override, so both lines in each of the following examples remove a row in place. The review.addComment slot is the Add a comment row.

<DocxEditor.ContextMenu>
  <DocxEditor.ContextMenu.Slot slotId="review.addComment" hidden />
  <DocxEditor.ContextMenu.Cut hidden />
</DocxEditor.ContextMenu>

<DocxEditor.ContextMenu>
  <DocxEditor.ContextMenu.Slot slot-id="review.addComment" hidden />
  <DocxEditor.ContextMenu.Cut hidden />
</DocxEditor.ContextMenu>

Add an application row

ContextMenu.Item supplies all of its behavior. Pass a label and an onSelect handler. To disable the row, pass disabled and a disabledReason.

<DocxEditor.ContextMenu>
  <DocxEditor.ContextMenu.Item label="Ask legal" onSelect={askLegal} />
</DocxEditor.ContextMenu>

<DocxEditor.ContextMenu>
  <DocxEditor.ContextMenu.Item label="Ask legal" @select="askLegal" />
</DocxEditor.ContextMenu>

More control

See Chrome slot reference for supported parts, types, and additional examples.