API Reference

FSubmenu

This is the builder for add a menu that can contains submenus to Univer. You shall never construct this class by yourself. Instead, call createSubmenu of FUniver to create a instance.

Please notice that until the appendTo method is called, the menu item is not added to the UI.

Access

Access through:

Setup

Register @univerjs/ui or a preset that includes it. In plugin mode, import @univerjs/ui/facade. Additional methods below require their listed plugin packages. See Facade setup.

@univerjs/ui

FSubmenu.addSeparator

Add a separator to the submenu.

TypeScript
addSeparator(): this

Returns

The FSubmenu itself for chaining calls.

Examples

TypeScript
// Create two leaf menus.const menu1 = univerAPI.createMenu({  id: 'submenu-nested-1',  title: 'Item 1',  action: () => {    console.log('Item 1 clicked')  },})const menu2 = univerAPI.createMenu({  id: 'submenu-nested-2',  title: 'Item 2',  action: () => {    console.log('Item 2 clicked')  },})// Add the leaf menus to a submenu and add a separator between them.// Append the submenu to the `contextMenu.others` section.univerAPI  .createSubmenu({ id: 'submenu-nested', title: 'Nested Submenu' })  .addSubmenu(menu1)  .addSeparator()  .addSubmenu(menu2)  .appendTo('contextMenu.others')

Package: @univerjs/ui · Type definitions

FSubmenu.addSubmenu

Add a menu to the submenu. It can be a FMenu or a FSubmenu.

TypeScript
addSubmenu(submenu: FMenu | FSubmenu): this

Parameters

  • submenu — Required. Menu to add to the submenu.

Returns

The FSubmenu itself for chaining calls.

Examples

TypeScript
// Create two leaf menus.const menu1 = univerAPI.createMenu({  id: 'submenu-nested-1',  title: 'Item 1',  action: () => {    console.log('Item 1 clicked')  },})const menu2 = univerAPI.createMenu({  id: 'submenu-nested-2',  title: 'Item 2',  action: () => {    console.log('Item 2 clicked')  },})// Add the leaf menus to a submenu.const submenu = univerAPI  .createSubmenu({ id: 'submenu-nested', title: 'Nested Submenu' })  .addSubmenu(menu1)  .addSeparator()  .addSubmenu(menu2)// Create a root submenu append to the `contextMenu.others` section.univerAPI  .createSubmenu({ id: 'custom-submenu', title: 'Custom Submenu' })  .addSubmenu(submenu)  .appendTo('contextMenu.others')

Types: FMenu · FSubmenu

Package: @univerjs/ui · Type definitions

FSubmenu.appendTo

Append the menu to any menu position on Univer UI.

TypeScript
appendTo(path: string | string[]): void

Parameters

  • path — Required. Some predefined path to append the menu. The paths can be an array, or an array joined by | separator. Since lots of submenus reuse the same name, you may need to specify their parent menus as well.

Examples

TypeScript
// This menu item will appear on every `contextMenu.others` section.univerAPI  .createMenu({    id: 'custom-menu-id-1',    title: 'Custom Menu 1',    action: () => {      console.log('Custom Menu 1 clicked')    },  })  .appendTo('contextMenu.others')// This menu item will only appear on the `contextMenu.others` section on the main area.univerAPI  .createMenu({    id: 'custom-menu-id-2',    title: 'Custom Menu 2',    action: () => {      console.log('Custom Menu 2 clicked')    },  })  .appendTo(['contextMenu.mainArea', 'contextMenu.others'])

Package: @univerjs/ui · Type definitions

How is this guide?

© 2026 DreamNum Co., Ltd.