> ## Documentation Index
> Fetch the complete documentation index at: https://botpress.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Send options as a dropdown menu

You can present options as a dropdown instead of buttons. This guide covers the built-in behaviour with [Capture Information](https://botpress.com/docs/studio/concepts/cards/capture-information.md) and an approach using code when you need a dropdown with fewer than six options.

> [!NOTE]
>
> You will need:
>
> * A [published bot](https://botpress.com/docs/get-started/quick-start.md)
> * Familiarity with JavaScript if you use [method 2](#method-2-manual-dropdown-execute-code)

> [!WARNING]
>
> The approach and styling in this guide are designed to work with [Webchat](https://botpress.com/docs/webchat/get-started/quick-start.md)'s choice components. If your bot is deployed on a different channel, you may need to modify the approach to work with that channel's components. Check out the [integrations](https://botpress.com/docs/integrations/get-started/introduction.md) section for more information.

## Method 1: Automatic dropdown (Capture Information)

1. Add a [Capture Information](https://botpress.com/docs/studio/concepts/cards/capture-information.md) Card to your [Workflow](https://botpress.com/docs/studio/concepts/workflows.md). Set the field type to **Single Choice** or **Multiple Choice**
2. Add your options inside the Card under **Choices**.

If you add more than five options, they are shown as a dropdown (list) instead of buttons. (The exact threshold can vary slightly by channel. See [Choices](https://botpress.com/docs/studio/concepts/cards/capture-information.md#choices) on the Capture Information page.)

This is the simplest approach when you have enough options to trigger the dropdown UI.

## Method 2: Manual dropdown (Execute Code)

To show a dropdown even when you have five or fewer options, or to build the option list in code, send a message with `type: 'dropdown'` from an [Execute Code](https://botpress.com/docs/studio/concepts/cards/execute-code.md) Card.

### Send the dropdown message

```javascript theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
await client.createMessage({
  userId: event.botId,
  conversationId: event.conversationId,
  tags: {},
  type: 'dropdown',
  payload: {
    text: 'Select an item:', // Shown above the control
    options: [
      { label: 'Dropdown 1', value: 'dd1' },
      { label: 'Dropdown 2', value: 'dd2' },
    ],
  },
})
```

1. **`payload.text`**: Label or instruction shown with the control.
2. **`payload.options`**: Each entry is `{ label: string, value: string }`.
   1. **`label`**: Text the user sees (for example, a product name).
   2. **`value`**: Value stored or matched in logic (for example, a SKU). They can match or differ.

> [!TIP]
>
> In an Execute Code Card, you can read context from the [event object](https://botpress.com/docs/studio/guides/advanced/event-properties.md).

### Complete the Workflow after the dropdown

After the dropdown is sent, the user will select an option. Here are some typical ways to handle this:

1. Add a [Wait for User Input](https://botpress.com/docs/studio/concepts/cards/capture-information.md#wait-for-user-input) Card so the Workflow pauses until the user interacts

2. Use an [Expression Card](https://botpress.com/docs/studio/concepts/cards/flow-logic.md#expression) (or similar) to evaluate their response by checking `event.payload.value`

3. Use an **Execute Code** Card to store their choice. For example:

   ```javascript theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
   workflow.varName = event.payload.value
   ```

   Remember to [create a Workflow variable](https://botpress.com/docs/studio/concepts/variables/scopes/workflow.md) (for example `varName`, type **String**) and grant access in code as needed ([variables in code](https://botpress.com/docs/studio/concepts/variables/in-code.md)).

Wire these cards in order in the same Node (or connected Nodes) so the bot always waits, validates, then saves before continuing.

## Customize the placeholder text (CSS)

Classes for styling dropdowns are listed under **Use custom styles** on the [appearance settings](https://botpress.com/docs/webchat/get-started/configure-your-webchat.md#use-custom-styles) page.

To replace the default **Select…** style label with your own, add custom CSS under **Bot Appearance** → **Styles** in the Studio, for example:

```css theme={"theme":{"light":"light-plus","dark":"dark-plus"}}
/* Hide the original "Select..." text */
.bpMessageBlocksDropdownButtonText {
  font-size: 0;
  color: transparent;
}

.bpMessageBlocksDropdownButtonText::before {
  content: "Choose an option...";
  font-size: 0.8rem;
  color: #7e7c7c;
}
```

Adjust `content`, `font-size`, and `color` to match your brand.

> [!TIP]
>
> You can rely on **Capture Information** for dropdowns when you have more than five choices, or use `createMessage` with `type: 'dropdown'` in an Execute Code Card whenever you need a dropdown with fewer options or custom `label` and `value` pairs.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.