Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Wix Design System (WDS)

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

# Migrate a Dashboard Menu Plugin Extension

Add a dashboard menu plugin extension to your new Wix CLI project as part of [migrating an app from the legacy Wix CLI](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli).

## Folder structure

| Legacy path | New path |
|--------|-----|
| `src/dashboard/menu-plugins/<name>/plugin.json` | `src/extensions/dashboard/menu-plugins/<name>/<name>.extension.ts` |

> **Note:** `<name>` is your extension's folder name in the legacy project. The new folder and files use the same name.

Dashboard menu plugins are configuration-only. There is no component file.

## Step 1 | Create the extension file

In the new project:

1. Create the folder `src/extensions/dashboard/menu-plugins/<name>/`.
2. Inside the folder, create `<name>.extension.ts`.
3. Add the code for the `action` variant your legacy `plugin.json` uses, and set each field to the value the table below specifies:

    ::::tabs

    :::Navigate-to-a-dashboard-page

    For a legacy `action.navigateToPage`:

    ```ts
    import { extensions } from '@wix/custom-extensions';

    export default extensions.dashboardMenuPlugin({
      id: '<value>',
      title: '<value>',
      extends: '<value>',
      iconKey: '<value>',
      action: {
        navigateToPage: {
          pageId: '<value>',
        },
      },
    });
    ```

    :::

    :::Open-a-dashboard-modal

    For a legacy `action.openModal`:

    ```ts
    import { extensions } from '@wix/custom-extensions';

    export default extensions.dashboardMenuPlugin({
      id: '<value>',
      title: '<value>',
      extends: '<value>',
      iconKey: '<value>',
      action: {
        openModal: {
          componentId: '<value>',
        },
      },
    });
    ```

    :::

    ::::

    | Field | Source in legacy project | What to specify |
    |-------|--------------------------|-----------------|
    | `id` | `id` in `plugin.json` | Copy source as is |
    | `title` | `title` in `plugin.json` | Copy source as is |
    | `extends` | `extends` in `plugin.json`, the ID of the slot the plugin plugs into | Copy source as is |
    | `iconKey` | `iconKey` in `plugin.json` | Copy source as is, or `''` if the legacy config doesn't set it |
    | `action` | `action` in `plugin.json` | Copy source as is, keeping the same variant |

4. Add the following field if it applies, inside the same object:

    ```ts
    subtitle: '<value>',
    ```

    | Field | Source in legacy project | What to specify | Condition |
    |-------|--------------------------|-----------------|-----------|
    | `subtitle` | `subtitle` in `plugin.json` | Copy source as is | Only if your legacy `plugin.json` sets it |

<blockquote class="important">

__Important:__

- The new `navigateToPage` accepts only `pageId`, and the new `openModal` accepts only `componentId`. A legacy `navigateToPage.relativeUrl` or `openModal.componentParams` value has no equivalent field in the new structure, so you can't carry it over.
- The `id` must match the value from the legacy `plugin.json`. Otherwise, the new entry is treated as a separate extension instead of a continuation of the legacy one.

</blockquote>

## Step 2 | Register the extension

In the new project, in `src/extensions.ts`:

1. Import the extension:

    ```ts
    import myMenuPlugin from './extensions/dashboard/menu-plugins/<name>/<name>.extension';
    ```

2. Add a `.use()` call for it to the `app()` chain, on its own line:

    ```ts
    .use(myMenuPlugin)
    ```

## Step 3 | Return to the main migration guide

Return to [Install the extension's dependencies](fallback::https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-the-cli/migrate-an-app-to-the-new-cli/migrate-an-app-from-the-legacy-cli/migrate-a-legacy-cli-app-to-the-new-wix-cli#install-the-extensions-dependencies) in the main migration guide.

Field	Source in legacy project	What to specify
`id`	`id` in `plugin.json`	Copy source as is
`title`	`title` in `plugin.json`	Copy source as is
`extends`	`extends` in `plugin.json`, the ID of the slot the plugin plugs into	Copy source as is
`iconKey`	`iconKey` in `plugin.json`	Copy source as is, or `''` if the legacy config doesn't set it
`action`	`action` in `plugin.json`	Copy source as is, keeping the same variant