---
title: "JavaScript Dropdown | LemonadeJS v5"
description: "LemonadeJS v5 archive. Explore LemonadeJS Dropdown, a JavaScript plugin compatible with Vue, React, and Angular. Features include autocomplete, smart."
source: https://lemonadejs.com/docs/v5/plugins/dropdown/
---

# JavaScript Dropdown

The LemonadeJS Dropdown is a lightweight, high-performance JavaScript plugin with a reactive design. It offers various configurable options and integrates seamlessly with popular front-end frameworks like Vue, React, and Angular. The main key features include:

- **Autocomplete**: Enables quick and efficient search functionality, allowing users to find options rapidly.
- **Grouping**: Allows categorization of options into groups for organized and intuitive navigation.
- **Smart Loading**: Optimizes performance by intelligently managing the DOM, ensuring exceptional responsiveness and efficiency, especially with large datasets.
- **Framework Compatibility**: Its framework-neutral design guarantees easy integration across various technologies, ensuring a uniform platform experience.

## Dropdown Use Cases

### Standalone Dropdown Component
Use LemonadeJS Dropdown directly in your Vue, React, or Angular applications for:
- Form selectors and autocomplete inputs
- Multi-select interfaces
- Country/language pickers
- Tag selectors and filters

### Data Grid Dropdown Editor
For spreadsheet applications with advanced dropdown column editors, [Jspreadsheet Pro](https://jspreadsheet.com/docs/dropdown-and-autocomplete) uses LemonadeJS Dropdown as the underlying component:
- **Conditional Dropdowns:** Options change based on other cell values
- **Dynamic Ranges:** Link dropdowns to cell ranges (e.g., Sheet1!A1:A4)
- **Remote Search:** Autocomplete from backend APIs with JWT support
- **Advanced Validation:** Professional spreadsheet dropdown features

**[Explore Jspreadsheet Pro Dropdown Editor](https://jspreadsheet.com/docs/dropdown-and-autocomplete)**

### Lightweight Alternative - Jsuites Dropdown
For simpler use cases without framework dependencies, [Jsuites Dropdown](https://jsuites.net/docs/dropdown) offers:
- Lightweight vanilla JavaScript
- No build tools required
- Simple API
- Used by Jspreadsheet CE (community edition)

**[Explore Jsuites Dropdown](https://jsuites.net/docs/dropdown)**

### Open Source Spreadsheets - Jspreadsheet CE
For open-source spreadsheet projects, [Jspreadsheet CE](https://bossanova.uk/jspreadsheet/docs/javascript-dropdown) provides basic dropdown editors:
- Community edition spreadsheet
- Uses Jsuites Dropdown
- MIT license

**[Explore Jspreadsheet CE](https://bossanova.uk/jspreadsheet/docs/javascript-dropdown)**

---

### When to Use Each

| Component | Best For | Framework | License |
|-----------|----------|-----------|---------|
| **LemonadeJS Dropdown** | Standalone forms, high-performance apps | Vue, React, Angular | MIT |
| **Jspreadsheet Pro** | Professional spreadsheets with advanced dropdown editors | Any | Commercial |
| **Jsuites Dropdown** | Simple forms, legacy projects, lightweight needs | Vanilla JS | MIT |
| **Jspreadsheet CE** | Open source spreadsheets, basic dropdown editors | Any | MIT |

---

## Documentation


### Installation

```bash
npm install @lemonadejs/dropdown
```

### Settings

| Attribute                | Description                                                                                                                                                                                |
|--------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| data: Item[]             | An array of options to be displayed. Each item should follow the structure defined in the 'Item Details' section.                                                                          |
| multiple?: Boolean       | If provided, enables the multiple selection mode, allowing users to select more than one option simultaneously.                                                                            |
| autocomplete?: Boolean   | If provided, enables the autocomplete feature, displaying an input field that allows users to filter and quickly find options in the Dropdown.                                             |
| value?: String           | Represents the current value or selected option in the Dropdown.                                                                                                                           |
| type?: String            | Specifies the type of display the Dropdown will use. It can be "searchbar" for a search bar interface, "picker" for a selection picker, or "default" for the default dropdown appearance.  |
| insert?: Boolean         | Enables the `insert` feature, allowing users to add a new option directly by typing the title text and clicking on the plus symbol.                                                        |
| format?: Number          | Data format type, usually in the form of { id: name } or { value: text }                                                                                                                   |
| width?: Number           | Specifies the width of the dropdown                                                                                                                                                        |
| placeholder?: String     | Placeholder text to guide users in the dropdown                                                                                                                                            |
| url?: String             | Specifies the URL for fetching the data. Do not declare the `data` attribute for the url to function properly.                                                                             |
| disabled?: Boolean       | Disabled the dropdown                                                                                                                                                                      |

### Item Details

| Attribute                     | Description                                                                                 |
|-------------------------------|---------------------------------------------------------------------------------------------|
| value?: Number\|String        | Represents the identifier or unique value associated with the option.                       |
| group?: String                | Indicates the group to which the option belongs, allowing for segregation and organization. |
| text?: String                 | Displays the label or text associated with the option.                                      |
| image?: String                | Specifies the image URL to be displayed alongside the option.                               |
| synonym?: String \| String[]  | Words with the same meaning to help the search.                                             |
| keywords?: String \| String[] | Keywords for easier item identification                                                     |
| disabled?: Boolean            | Indicates whether the item is currently disabled                                            |
| color?: String                | Specifies the color associated with the item                                                |


### Events

| Event                                      | Trigger                                                                     |
|--------------------------------------------|-----------------------------------------------------------------------------|
| onclose?: () => void                       | Invoked when the dropdown modal is closed.                                  |
| onbeforeinsert?: (instance, Item) => void  | Invoked before an item is added to the options through the insert feature.  |
| oninsert?: (instance, Item) => void        | Invoked after an item is added to the options through the insert feature.   |
| onchange?: (instance, Item) => void        | Invoked when the value changes.                                             |
| onload?: (instance, Item) => void          | Invoked when appended to the DOM.                                           |
| onsearch?: (instance, Item) => void        | Invoked when searching for an item.                                         |
| onbeforesearch?: (instance, Item) => void  | Invoked before initiating a search.                                         |
| onopen?: (instance) => void                | Invoked when the dropdown is opened.                                        |

## Dropdown Examples

### Performance

Create a dropdown with 100000 items from a JSON list.

```html
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/faker@3.1.0/build/build/faker.min.js"></script>

<div id='root'></div>

<script>
let root = document.getElementById('root');
let data = [];

for (let i = 0; i < 100000; i++) {
    data.push({
        value: i,
        text: faker.commerce.productName()
    });
}

// Initial time before creating the table
let s = Date.now();

Dropdown(root, {
    data: data,
    value: 1,
    width: 260,
    autocomplete: true,
    onload: function() {
        let e = Date.now();
        let p = document.createElement('p');
        p.textContent = 'The dropown was created in: ' + (e - s) + 'ms';
        root.appendChild(p)
    },
});
</script>
</html>
```
```javascript
import Dropdown from '@lemonadejs/dropdown';
import { faker } from '@faker-js/faker';

import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css';

export default function App() {

    let data = [];

    for (let i = 0; i < 100000; i++) {
        data.push({
            value: i,
            text: faker.commerce.productName()
        });
    }

    // Default value
    this.value = 1;
    // load the data
    this.data = data; 

    return render => render`<div>
        <Dropdown data="${this.data}" value="${this.value}" />
    </div>`
}
```
```jsx
import React, { useRef } from 'react';
import Dropdown from '@lemonadejs/dropdown/dist/react';
import { faker } from '@faker-js/faker';

import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'

let data = [];

for (let i = 0; i < 100000; i++) {
    data.push({
        value: i,
        text: faker.commerce.productName()
    });
}

export default function App() {
    const myRef = useRef();

    return (<div>
        <Dropdown ref={myRef} data={data} value={1} width={260} />
    </div>);
}
```
```vue
<template>
    <Dropdown :data="data" :value="1" :width="260" />
</template>

<script>
import Dropdown from '@lemonadejs/dropdown/dist/vue';
import { faker } from '@faker-js/faker';

import '@lemonadejs/dropdown/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        let data = [];
        
        for (let i = 0; i < 100000; i++) {
            data.push({
                value: i,
                text: faker.commerce.productName()
            });
        }

        return {
            data: data
        };
    },
}
</script>
```

### Grouping and Multiple Selection

The dropdown supports categorizing options into lists, enhancing navigation and organization. It also allows multiple selections, enabling users to choose several options simultaneously for greater flexibility.

```html
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>

<div id='root'></div>

<script>
let root = document.getElementById('root');

Dropdown(root, {
    data: [
        { "text": "Red", "value": 1, "group": "Warm" },
        { "text": "Blue", "value": 2, "group": "Cool" },
        { "text": "Green", "value": 3, "group": "Cool" },
        { "text": "Yellow", "value": 4, "group": "Warm" },
        { "text": "Purple", "value": 5, "group": "Cool" },
        { "text": "Gray", "value": 6, "group": "Cool" }
    ],
    value: 1,
    width: 260,
    multiple: true,
});
</script>
</html>
```
```javascript
import Dropdown from '@lemonadejs/dropdown';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    this.data = [
        { "text": "Red", "value": 1, "group": "Warm" },
        { "text": "Blue", "value": 2, "group": "Cool" },
        { "text": "Green", "value": 3, "group": "Cool" },
        { "text": "Yellow", "value": 4, "group": "Warm" },
        { "text": "Purple", "value": 5, "group": "Cool" },
        { "text": "Gray", "value": 6, "group": "Cool" }
    ]

    return render => render`<div>
        <Dropdown data="${this.data}" value="${1}" multiple="${true}" />
    </div>`
}
```
```jsx
import React, { useRef } from 'react';
import Dropdown from '@lemonadejs/dropdown/dist/react';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'


const data = [
    { "text": "Red", "value": 1, "group": "Warm" },
    { "text": "Blue", "value": 2, "group": "Cool" },
    { "text": "Green", "value": 3, "group": "Cool" },
    { "text": "Yellow", "value": 4, "group": "Warm" },
    { "text": "Purple", "value": 5, "group": "Cool" },
    { "text": "Gray", "value": 6, "group": "Cool" }
]

export default function App() {
    const myRef = useRef();

    return (<div>
        <Dropdown ref={myRef} data={data} value={1} width={260} multiple={true} />
    </div>);
}
```
```vue
<template>
    <Dropdown :data="data" :value="1" :width="260" :multiple="true" />
</template>

<script>
import Dropdown from '@lemonadejs/dropdown/dist/vue'
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        return {
            data: [
                { "text": "Red", "value": 1, "group": "Warm" },
                { "text": "Blue", "value": 2, "group": "Cool" },
                { "text": "Green", "value": 3, "group": "Cool" },
                { "text": "Yellow", "value": 4, "group": "Warm" },
                { "text": "Purple", "value": 5, "group": "Cool" },
                { "text": "Gray", "value": 6, "group": "Cool" }
            ]
        };
    },
}
</script>
```

### Autocomplete and Inserting New Options

The dropdown includes an autocomplete feature for fast, type-based option searches. Its DOM management system ensures efficient performance with large datasets. Users can also directly insert new options, offering enhanced flexibility and convenience.

```html
<html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/style.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
<script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/dropdown/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/faker@3.1.0/build/build/faker.min.js"></script>

<div id='root'></div>

<script>
let root = document.getElementById('root');

let d = [];
for (let i = 0; i < 1000; i++) {
    d.push({
        value: i,
        text: faker.commerce.productName(),
    });
}

Dropdown(root, {
    data: d,
    value: 1,
    width: 260,
    autocomplete: true,
    insert: true,
});
</script>
</html>
```
```javascript
import Dropdown from '@lemonadejs/dropdown';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css';
import { faker } from '@faker-js/faker';

export default function App() {

    let data = [];

    for (let i = 0; i < 100000; i++) {
        data.push({
            value: i,
            text: faker.commerce.productName()
        });
    }

    this.data = data;

    return render => render`<div>
        <Dropdown data="${this.data}" value="${1}" autocomplete="${true}" insert="${true}" />
    </div>`
}

```
```jsx
import React, { useRef } from 'react';
import Dropdown from '@lemonadejs/dropdown/dist/react';
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'

import { faker } from '@faker-js/faker';

let d = [];
for (let i = 0; i < 1000; i++) {
    d.push({
        value: i,
        text: faker.commerce.productName(),
    });
}

export default function App() {
    const myRef = useRef();

    return (<div>
        <Dropdown ref={myRef} data={d} value={1} width={260} autocomplete={true} insert={true} />
    </div>);
}
```
```vue
<template>
    <Dropdown :data="data" :value="1" :width="260" :autocomplete="true" :insert="true" />
</template>

<script>
import Dropdown from '@lemonadejs/dropdown/dist/vue'
import '@lemonadejs/dropdown/dist/style.css'
import '@lemonadejs/modal/dist/style.css'

import { faker } from '@faker-js/faker';

export default {
    name: 'App',
    components: {
        Dropdown
    },
    data() {
        let d = [];
        for (let i = 0; i < 1000; i++) {
            d.push({
                value: i,
                text: faker.commerce.productName(),
            });
        }

        return {
            data: d
        };
    },
}
</script>
```

## Codesandbox working examples

Here is more examples on codesandbox.

- [React Dropdown](https://codesandbox.io/p/devbox/clever-fast-8ky2d4){target="_blank"}
- [Vue Dropdown](https://codesandbox.io/p/sandbox/fervent-goldberg-cpf3rq){target="_blank"}