ContextMenu

Create custom menu item and prepend to right click context menu.

Useful for adding custom actions to context menu (when a user right-clicks on a track, album, artist, etc.)

Classes

Item

Single context menu item.

new Spicetify.ContextMenu.Item(
  name: string,
  onClick: OnClickCallback,
  shouldAdd?: ShouldAddCallback,
  icon?: SVGIcon | string,
  disabled?: boolean,
)

Parameters

Parameter	Type	Description
name	`string`	Name of the menu item.
onClick	`OnClickCallback`	Callback function when the menu item is clicked.
shouldAdd	`ShouldAddCallback`	Callback function to determine if the menu item should be added.
icon	`SVGIcon` \| `string`	Icon of the menu item.
disabled	`boolean`	Whether the menu item is disabled.

Properties

Name	Type	Description
iconList	`readonly SVGIcon[]`	List of icons.
name	`string`	Name of the menu item.
icon	`SVGIcon` \| `string`	Icon at the end of the menu item.
disabled	`boolean`	Whether the menu item is disabled.
shouldAdd	`ShouldAddCallback`	Callback function to determine if the menu item should be added.
onClick	`OnClickCallback`	Callback function when the menu item is clicked.

Methods

`register`

register(): void

`deregister`

Remove the menu item from context menu.

deregister(): void

Example

// This function will determine if the selected item is a track
function ifItemIsTrack(uri) {
  let uriObj = Spicetify.URI.fromString(uri[0]);
  switch (uriObj.type) {
    case Type.TRACK:
      return true;
  }
  return false;
}

// Create a new menu item that only appears when a track is selected
const menuItem = new Spicetify.ContextMenu.Item(
  "My Menu Item",
  () => {
    Spicetify.showNotification("My Menu Item clicked!");
  },
  ifItemIsTrack,
  Spicetify.SVGIcons["play"],
  false,
);

// Register the menu item
menuItem.register();

// Deregister the menu item
menuItem.deregister();

// Change the menu item's name
menuItem.name = "My New Menu Item";

// Change the menu item's icon
menuItem.icon = "pause"

SubMenu

Create a sub menu to contain Items.

Items in subItems array shouldn’t be registered.

new Spicetify.ContextMenu.SubMenu(
  name: string,
  subItems: Iterable<Item>,
  shouldAdd?: ShouldAddCallback,
  disabled?: boolean,
)

Parameters

Parameter	Type	Description
name	`string`	Name of the menu item.
subItems	`Iterable<Item>`	Array of `Item`s to be added to the sub menu.
shouldAdd	`ShouldAddCallback`	Callback function to determine if the menu item should be added.
disabled	`boolean`	Whether the menu item is disabled.

Properties

Name	Type	Description
name	`string`	Name of the menu item.
disabled	`boolean`	Whether the menu item is disabled.
shouldAdd	`ShouldAddCallback`	Callback function to determine if the menu item should be added.

Methods

`addItem`

Add an Item to the sub menu.

addItem(item: Item): void

Parameter	Type	Description
item	`Item`	`Item` to be added to the sub menu.

`removeItem`

Remove an Item from the sub menu.

removeItem(item: Item): void

Parameter	Type	Description
item	`Item`	`Item` to be removed from the sub menu.

`register`

register(): void

`deregister`

Remove the sub menu from context menu.

deregister(): void

Example

// Create a new menu item
const menuItem = new Spicetify.ContextMenu.Item(
  "My Menu Item",
  () => {
    Spicetify.showNotification("My Menu Item clicked!");
  },
  () => true,
  Spicetify.SVGIcons["play"],
  false,
);

// Create a new sub menu
const subMenu = new Spicetify.ContextMenu.SubMenu(
  "My Sub Menu",
  [menuItem],
  () => true,
  false,
);

// Register the sub menu
subMenu.register();

// Deregister the sub menu
subMenu.deregister();

// Change the sub menu's name
subMenu.name = "My New Sub Menu";

// Add a new menu item to the sub menu
subMenu.addItem(new Spicetify.ContextMenu.Item(
  "My New Menu Item",
  () => {
    Spicetify.showNotification("My New Menu Item clicked!");
  },
  () => true,
  Spicetify.SVGIcons["play"],
  false,
));

Edit this page