How to Create a Dropdown Menu on Your NodeJS Discord Bot

Note:

Discord dropdown menus, officially called Select Menus, are interactive components that allow users to choose from a list of options in a drop-down interface. They provide a clean, organized way to handle user input without relying on text commands.

1. Log In to Your Panel

---

2. Select the ‘Files’ Tab

---

3. Create Your Main Bot’s File

Create a new file called index.js then paste the following code.

What this code does:

• It creates a Discord bot that responds to the /menu command.
• The bot displays a dropdown menu with three hosting plan options:
  • Discord Bot Hosting (🤖)
  • Game Hosting (🎮)
  • Web Hosting (🌐)
• When the user selects an option, the bot sends them a private message confirming their choice.
• The code uses Discord’s latest components (v2) for improved functionality.

 // Calling our requierments
const { Client, GatewayIntentBits, REST, Routes, SlashCommandBuilder, ActionRowBuilder, MessageFlags, StringSelectMenuBuilder, StringSelectMenuOptionBuilder } = require('discord.js');
 
 // Setting our variables
const TOKEN = 'YOUR_BOT_TOKEN';
const CLIENT_ID = 'YOUR_CLIENT_ID';
 
const client = new Client({
  intents: [GatewayIntentBits.Guilds],
});
 
client.once('ready', async () => {
  console.log(`✅ Logged in as ${client.user.tag}`);
 
  // Register the /menu command
  const commands = [
    new SlashCommandBuilder()
      .setName('menu')
      .setDescription('Sends a dropdown menu!')
      .toJSON()
  ];
 
  const rest = new REST({ version: '10' }).setToken(TOKEN);
  await rest.put(Routes.applicationCommands(CLIENT_ID), { body: commands });
  console.log('✅ Slash command registered');
});
 
  // The bot sends dropdown menu after the command was used
client.on('interactionCreate', async interaction => {
  if (interaction.isChatInputCommand() && interaction.commandName === 'menu') {
    const components = [
        new ActionRowBuilder()
            .addComponents(
                new StringSelectMenuBuilder()
                    .setCustomId("dropdown_menu")
                    .setPlaceholder("Plan selector")
                    .addOptions(
                        new StringSelectMenuOptionBuilder()
                            .setLabel("Discord Bot hosting")
                            .setDescription("(cheapest option)")
                            .setValue("discord_hosting")
                            .setEmoji({
                                name: "🤖",
                            }),
                        new StringSelectMenuOptionBuilder()
                            .setLabel("Game Hosting")
                            .setValue("game_hosting")
                            .setDescription("(best resources)")
                            .setEmoji({
                                name: "🎮",
                            }),
                        new StringSelectMenuOptionBuilder()
                            .setLabel("Web hosting")
                            .setValue("web_hosting")
                            .setEmoji({
                                name: "🌐",
                            }),
                    ),
            ),
];
 
    await interaction.reply({ components: components, flags: MessageFlags.IsPersistent | MessageFlags.IsComponentsV2 }); // As we can see, we've set the messsage flag to IsComponentsV2 so we can use them
  }
 
  if (interaction.isStringSelectMenu() && interaction.customId === 'dropdown_menu') {
    const selection = interaction.values[0];
    let response;
    if (selection === 'discord_hosting') {
      response = '🤖 You selected **Discord Bot Hosting**.';
    } else if (selection === 'game_hosting') {
      response = '🎮 You selected **Game Hosting**.';
    } else if (selection === 'web_hosting') {
      response = '🌐 You selected **Web Hosting**.';
    }
    await interaction.reply({ content: response, ephemeral: true });
  }
});
 
client.login(TOKEN);

Discord Bot Hosting

Starts at $1.49

Was this article helpful?

0 0

Please Share Your Feedback

How Can We Improve This Article?

Submit