menuItems

• Type: MenuItem[] | ((params: CallbackParams & { prev: MenuItem[]; childOptions: ChildResolverOptions }) => MenuItem[])
• Optional: Yes

The menuItems property allows you to define custom actions in the pane header menu of document lists, custom components, or standard lists.

Standard Usage

JSON

import { DownloadIcon } from '@sanity/icons';

{
  title: 'Articles',
  schemaType: 'article',
  menuItems: [
    {
      title: 'Export to CSV',
      icon: DownloadIcon,
      action: 'export-csv',
      showAsAction: true,
    },
  ],
}

Helpers

import { DownloadIcon } from '@sanity/icons';

helpers.listing('article', {
  title: 'Articles',
  menuItems: [
    {
      title: 'Export to CSV',
      icon: DownloadIcon,
      action: 'export-csv',
      showAsAction: true,
    },
  ],
});

Working with Existing Menu Items (prev)

When using a callback function, the callback parameters object includes a prev property containing the default menu items generated by Sanity Studio. This is useful for appending, prepending, or filtering default actions.

JSON

import { DownloadIcon } from '@sanity/icons';

{
  title: 'Articles',
  schemaType: 'article',
  menuItems: ({ prev }) => [
    ...prev,
    {
      title: 'Export to CSV',
      icon: DownloadIcon,
      action: 'export-csv',
    },
  ],
}

Helpers

import { DownloadIcon } from '@sanity/icons';

helpers.listing('article', {
  title: 'Articles',
  menuItems: ({ prev }) => [
    ...prev,
    {
      title: 'Export to CSV',
      icon: DownloadIcon,
      action: 'export-csv',
    },
  ],
});

Dynamic Menu Items (Callback)

You can dynamically show or hide menu items using a callback function based on the active desk context.

JSON

import { DownloadIcon, TrashIcon } from '@sanity/icons';

{
  title: 'Articles',
  schemaType: 'article',
  menuItems: ({ currentUser }) => {
    const items = [
      {
        title: 'Export',
        icon: DownloadIcon,
        action: 'export',
        showAsAction: true,
      },
    ];

    if (currentUser.roles.some((role) => role.name === 'administrator')) {
      items.push({
        title: 'Purge Deleted',
        icon: TrashIcon,
        action: 'purge',
        showAsAction: false,
      });
    }

    return items;
  },
}

Helpers

import { DownloadIcon, TrashIcon } from '@sanity/icons';

helpers.listing('article', {
  title: 'Articles',
  menuItems: ({ currentUser }) => {
    const items = [
      {
        title: 'Export',
        icon: DownloadIcon,
        action: 'export',
        showAsAction: true,
      },
    ];

    if (currentUser.roles.some((role) => role.name === 'administrator')) {
      items.push({
        title: 'Purge Deleted',
        icon: TrashIcon,
        action: 'purge',
        showAsAction: false,
      });
    }

    return items;
  },
});

For grouping menu items, see the menuItemGroups page.