djs-menu-v13

Create menu for your Discord Bot very easly

• Make for Discord.js V13

  • Work with Interaction

• Create simple and complex Menu

  • with button and select menu

• Support event and callbacks

  • For do whatever you want

Usefull link

• Documentation
• GitHub Page
• NPM Page

How to use it ?

First step

First you need to install the module with

npm i djs-menu-v13

Then, import the module in your code

import {Menu, MenuPage} from 'djs-menu-v13';
// Or with require
const {Menu, MenuPage} = require('djs-menu-v13');

For this example, we gonna make two pages :

• The first one with a basic embed and a button to go to the second page
• The second one with a button to return to the first page and a button to exit the menu

First we need to create all the buttons we need :

const nextPageBtn = {
    label: 'Go to second page',
    target: 'secondPage', // The target is the ID of the page that we need to display when this button is clicked
    style: 'PRIMARY',
};

const previousPageBtn = {
    label: 'Go to first page',
    target: 'firstPage',
    style: 'PRIMARY',
};

const exitBtn = {
    label: 'Exit',
    // You can also put a function to execute when the button is clicked
    target: (page, interaction, menu) => {
        menu.stop();
        interaction.editReply({
            content: 'The menu has just been closed',
            embeds: [],
            components: [],
        });
    },
    style: 'DANGER',
};

Then we need to create two embeds for our pages. You don't have to use an embed to make a page, just a content is enough.

const firstEmbed = new MessageEmbed()
    .setColor('GREEN')
    .setDescription('FIRST PAGE');

const secondEmbed = new MessageEmbed()
    .setColor('YELLOW')
    .setDescription('SECOND PAGE'); 

Now we can create our pages.

const firstPage = new MenuPage()
    .addEmbed(firstEmbed)
    .addButton(nextPageBtn)
    .setId('secondPage'); // The id that the target in the button will use

const secondPage = new MenuPage()
    .addEmbed(secondEmbed)
    .addButton(previousPageBtn)
    .addButton(exitBtn)
    .setId('secondPage');

And finaly create the menu and start it

const menu = new Menu(interaction)
    .addPage(firstPage)
    .addPage(secondPage)
    .start('firstPage');

GG you just start your first menu ! Now, you can listen to events emit by your menu

menu.on('stop', (interaction, reason) => {
  if (reason === 'noReply' ) {
    // Don't forget to clear embeds and components generated by the menu
      interaction.editReply({
        embeds: [], 
        components: [],
        content: 'You did not respond quickly enough',
      });
  }
});

menu.on('pageChanged', (page, interaction, pages) => {
  console.log('the page just changed');
});

Full code example here

Menu with Select Menu

You can also use select menu with buttons. Check this example to know how