# FSubmenu

> Language fallback: requested `zh-CN`; content is `en-US`.

- Human documentation: [https://docs.univer.ai/zh-CN/reference/facade/submenu](https://docs.univer.ai/zh-CN/reference/facade/submenu)

- Agent Markdown: [https://docs.univer.ai/zh-CN/reference/facade/submenu.md](https://docs.univer.ai/zh-CN/reference/facade/submenu.md)

- Requested language: `zh-CN`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/submenu.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/submenu.mdx)

---

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:

* [`FUniver.createSubmenu()`](https://docs.univer.ai/zh-CN/reference/facade/univer.md#createsubmenu)

## Setup

Register [`@univerjs/ui`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/ui.md) or a preset that includes it. In plugin mode, import `@univerjs/ui/facade`. Additional methods below require their listed plugin packages. See [Facade setup](https://docs.univer.ai/zh-CN/guides/sheets/getting-started/facade.md).

## `@univerjs/ui`

### `FSubmenu.addSeparator`

Add a separator to the submenu.

```typescript
addSeparator(): this
```

**Returns**

The FSubmenu itself for chaining calls.

**Examples**

```ts
// 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`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/ui.md) · [Type definitions](https://unpkg.com/@univerjs/ui@1.0.0-rc.0/lib/types/facade/f-menu-builder.d.ts)

### `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**

```ts
// 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`](https://docs.univer.ai/zh-CN/reference/facade/menu.md) · [`FSubmenu`](https://docs.univer.ai/zh-CN/reference/facade/submenu.md)

**Package:** [`@univerjs/ui`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/ui.md) · [Type definitions](https://unpkg.com/@univerjs/ui@1.0.0-rc.0/lib/types/facade/f-menu-builder.d.ts)

### `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**

```ts
// 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`](https://docs.univer.ai/zh-CN/reference/packages/plugins/univerjs/ui.md) · [Type definitions](https://unpkg.com/@univerjs/ui@1.0.0-rc.0/lib/types/facade/f-menu-builder.d.ts)