> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Build a Dashboard Menu Plugin in Studio Two

## Article: Build a Dashboard Menu Plugin in Studio Two

## Article Link: https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/build-a-dashboard-menu-plugin-in-studio-two.md

## Article Content:

# Build a Dashboard Menu Plugin in Studio Two

A [dashboard menu plugin](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/about-dashboard-menu-plugins.md) is a configuration file with no code of its own. It adds an item to a menu on a Wix dashboard page and opens a dashboard page or modal when clicked. Most of the work happens in that target: it reads the data the slot passes and does something useful with it.

This article walks through an example menu plugin in the **More Actions** menu of a CRM contact's page. It opens a dashboard modal that shows the contact's email address. Menu plugins in other slots work the same way. The data each slot passes depends on the slot you chose.

Follow the instructions below to:

1. Add the target page or modal.
2. Scaffold the menu plugin.
3. Review the configuration.
4. Read the slot data in the target.
5. Check the menu plugin.

## Step 1 | Add the target page or modal

The menu plugin needs the ID of the page or modal it opens, so add the target first. For the example, generate a dashboard modal with `Contact Summary` as the **Modal Title**. **Generate** names the modal folder after the title, so the folder is `contact-summary`. For the full procedure, see [Add a Dashboard Modal Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/add-a-dashboard-modal-extension-in-studio-two.md).

Open the target's `.extension.ts` file and copy its `id`. You use it in the next step.

## Step 2 | Scaffold the menu plugin

Generate a dashboard menu plugin that opens the target. For the example, use these values:

- **What would you like to extend?**: `Contact main more actions menu`, the slot in the **More Actions** menu at the top of a contact's page.
- **Choose what happens when the menu item is clicked**: **Open Modal**.
- **Target id**: The modal's ID from Step 1.
- **Menu item title**: `Contact Summary`.

For the full procedure, see [Add a Dashboard Menu Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/add-a-dashboard-menu-plugin-extension-in-studio-two.md).

You can find the new file under `src/extensions/dashboard/menu-plugins/<plugin-folder>/`.

## Step 3 | Review the configuration

`<plugin-folder>.extension.ts` is the menu plugin's only file. For the example menu plugin it looks like this:

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

export default extensions.dashboardMenuPlugin({
  id: '2b6c6f0e-8f6e-4c1e-9d0a-3f5b7c1a9e42',
  title: 'Contact Summary',
  extends: '79963a99-8680-4164-8961-8867fcb1751a',
  iconKey: 'Sparkles',
  action: {
    openModal: {
      componentId: '881eedb6-b5a1-4b86-ac13-72c73df1af4a',
    },
  },
});
```

`extends` is the slot ID of the slot you chose. `action.openModal.componentId` is the ID of the modal from Step 1. To navigate to a dashboard page instead, replace `openModal` with `navigateToPage: { pageId: '<page-id>' }`. Keep `id` stable.

For every field, see [Dashboard Menu Plugin Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-menu-plugins/dashboard-menu-plugin-extension-files-and-code.md#configuration-fields).

## Step 4 | Read the slot data in the target

When a Wix user clicks the item, the slot passes data from the host page to the page or modal the item opens. The Contact main more actions menu slot passes `contactId`, the ID of the contact in view. Each slot has its own data type, which the business solution's package exports:

```tsx
import type { plugins } from '@wix/crm/dashboard';

type SlotData = plugins.ContactFullPage.ContactMainMoreActionsMenuParams;
```

To read the data, call [`observeState()`](https://dev.wix.com/docs/sdk/host-modules/dashboard/observe-state.md) in the target. The example modal passes `contactId` to [`getContact()`](https://dev.wix.com/docs/api-reference/crm/members-contacts/contacts/contacts/contact-v4/get-contact?apiView=SDK.md) and shows the contact's email address. Replace the content of `contact-summary.tsx` with this code:

```tsx
import { useEffect, useState, type FC } from 'react';
import { dashboard } from '@wix/dashboard';
import { contacts } from '@wix/crm';
import type { plugins } from '@wix/crm/dashboard';
import {
  WixDesignSystemProvider,
  Box,
  Text,
  CustomModalLayout,
} from '@wix/design-system';
import '@wix/design-system/styles.global.css';
import config from './contact-summary.config.ts';

const { width, height, title } = config;

type SlotData = plugins.ContactFullPage.ContactMainMoreActionsMenuParams;

const Modal: FC = () => {
  const [email, setEmail] = useState<string>();

  useEffect(() => {
    const { disconnect } = dashboard.observeState<SlotData>(({ contactId }) => {
      contacts.getContact(contactId).then((contact) => {
        setEmail(contact.primaryInfo?.email ?? 'No email address');
      });
    });
    return disconnect;
  }, []);

  return (
    <WixDesignSystemProvider>
      <CustomModalLayout
        width={width}
        maxHeight={height}
        title={title}
        primaryButtonText="Close"
        primaryButtonOnClick={() => dashboard.closeModal()}
        content={
          <Box direction="vertical">
            <Text>{email ?? 'Loading...'}</Text>
          </Box>
        }
      />
    </WixDesignSystemProvider>
  );
};

export default Modal;
```

The modal runs with the identity of the Wix user who clicked the item, so the API calls it can make depend on that user's role. For more on modals, see [Build a Dashboard Modal in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/build-a-dashboard-modal-in-studio-two.md).

## Step 5 | Check the menu plugin

A menu plugin appears in the menu of the dashboard page that owns its slot. To check it, open that page, open the menu, and click the item. For the example menu plugin, that's a contact's full page:

1. In the site dashboard, go to **Customers & Leads** > **Contacts**.
2. Hover over a contact and click **View** to open the contact's full page. Clicking the row instead opens a side panel with a different menu.
3. At the top of the contact's page, open the **More Actions** menu and click **Contact Summary**.

The modal opens and shows the contact's email address.

When the menu plugin behaves the way you want, click **Publish** in the Studio Two editor to ship it with your site.

## See also

- [About Dashboard Menu Plugins](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/about-dashboard-menu-plugins.md)
- [Add a Dashboard Menu Plugin Extension in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-menu-plugins/add-a-dashboard-menu-plugin-extension-in-studio-two.md)
- [Dashboard Menu Plugin Extension Files and Code](https://dev.wix.com/docs/dashboard-extensions/dashboard-menu-plugins/dashboard-menu-plugin-extension-files-and-code.md)
- [Build a Dashboard Modal in Studio Two](https://dev.wix.com/docs/studio-two/code-your-site/build-a-custom-dashboard/dashboard-modals/build-a-dashboard-modal-in-studio-two.md)
- [Dashboard Menu Plugins](https://dev.wix.com/docs/overview/extensions-framework/dashboard-extensions/dashboard-menu-plugins.md)