Are you an LLM? You can read better optimized documentation at /examples/menu-item-groups.md for this page in Markdown format
menuItemGroups
- Type:
MenuItemGroup[] | ((params: CallbackParams & { prev: MenuItemGroup[]; childOptions: ChildResolverOptions }) => MenuItemGroup[]) - Optional: Yes
The menuItemGroups property allows you to group multiple custom menu items under collapsible sections or specific categories in the pane header menu.
Standard Usage
ts
import { DownloadIcon, TrashIcon } from '@sanity/icons';
{
title: 'Articles',
schemaType: 'article',
menuItemGroups: [
{
id: 'actions-group',
title: 'Database Actions',
},
],
menuItems: [
{
title: 'Export to CSV',
icon: DownloadIcon,
action: 'export-csv',
group: 'actions-group',
},
{
title: 'Purge Records',
icon: TrashIcon,
action: 'purge',
group: 'actions-group',
},
],
}ts
import { DownloadIcon, TrashIcon } from '@sanity/icons';
helpers.listing('article', {
title: 'Articles',
menuItemGroups: [
{
id: 'actions-group',
title: 'Database Actions',
},
],
menuItems: [
{
title: 'Export to CSV',
icon: DownloadIcon,
action: 'export-csv',
group: 'actions-group',
},
{
title: 'Purge Records',
icon: TrashIcon,
action: 'purge',
group: 'actions-group',
},
],
});Working with Existing Groups (prev)
When using a callback function, the callback parameters object includes a prev property containing the default menu item groups from Sanity Studio. You can use this to append, prepend, or filter existing groups.
ts
{
title: 'Articles',
schemaType: 'article',
menuItemGroups: ({ prev }) => [
...prev,
{
id: 'custom-group',
title: 'Custom Actions',
},
],
}ts
helpers.listing('article', {
title: 'Articles',
menuItemGroups: ({ prev }) => [
...prev,
{
id: 'custom-group',
title: 'Custom Actions',
},
],
});Dynamic Menu Groups (Callback)
You can dynamically configure the menu groups using a callback function based on the active desk context.
ts
{
title: 'Articles',
schemaType: 'article',
menuItemGroups: ({ workspace }) => [
{
id: 'actions-group',
title: `${workspace === 'production' ? 'Live' : 'Staging'} Actions`,
},
],
}ts
helpers.listing('article', {
title: 'Articles',
menuItemGroups: ({ workspace }) => [
{
id: 'actions-group',
title: `${workspace === 'production' ? 'Live' : 'Staging'} Actions`,
},
],
});For defining menu items, see the menuItems page.
