# @lemonadejs/dropdown

> LemonadeJS dropdown integration.

Latest version **5.8.4** (published 2026-06-22) · 0 weekly downloads

## Install

```sh
npm install @lemonadejs/dropdown
pnpm add @lemonadejs/dropdown
yarn add @lemonadejs/dropdown
bun add @lemonadejs/dropdown
```

## Health

**Score 50/100 (C)** — status: active.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 5.8.4 |
| Published | 2026-06-22 |
| First published | 2022-01-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 67.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Contact |
| Maintainers | hodeware |
| Keywords | javascript dropdown, lemonadejs plugins, js, library, javascript plugins |

## Links

- npm: https://www.npmjs.com/package/@lemonadejs/dropdown
- npm.io page: https://npm.io/package/@lemonadejs/dropdown

## Dependencies (2)

- [lemonadejs](https://npm.io/package/lemonadejs.md) ^5.3.6
- [@lemonadejs/modal](https://npm.io/package/@lemonadejs/modal.md) ^5.8.3

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 5.8.4 (latest) — 2026-06-22
- 6.0.0-beta.0 (beta) — 2026-08-04
- 5.8.3 — 2026-06-12
- 5.8.2 — 2026-02-03
- 5.8.1 — 2026-01-21
- 5.8.0 — 2025-12-06
- 5.2.0 — 2025-08-16
- 5.0.0 — 2025-04-18
- 3.6.2 — 2025-02-11
- 3.6.1 — 2025-02-11
- 3.6.0 — 2025-01-01
- 3.5.0 — 2024-10-19
- 3.2.2 — 2024-04-28
- 3.2.1 — 2024-04-05
- 3.2.0 — 2024-03-25
- … 21 more at https://npm.io/package/@lemonadejs/dropdown/versions

## README

# JavaScript Dropdown

[The Dropdown Documentation](https://lemonadejs.com/docs/plugins/dropdown)

Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.

The LemonadeJS Dropdown is a versatile solution for efficient option management. It is a framework-agnostic JavaScript plugin designed for seamless integration with Vue, React, and Angular. This feature-rich dropdown incorporates autocomplete for swift selections, grouping for organized options, and lazy loading for optimized performance, contributing to a smooth and improved user experience.

## Features

-   Lightweight: The JavaScript Dropdown is only about 2 KBytes;
-   Integration: It can be used as a standalone library or integrated with any modern framework;

## Getting Started

You can install using NPM or using directly from a CDN.

### npm Installation

To install it in your project using npm, run the following command:

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

### CDN

To use Dropdown via a CDN, include the following script tags in your HTML file:

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

### Usage

Quick example with Lemonade

```javascript
import Dropdown from '@lemonadejs/dropdown';
import '@lemonadejs/dropdown/dist/style.css';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const self = this;

    self.data = [
        { text: 'Red', value: 1 },
        { text: 'Blue', value: 2 },
        { text: 'Green', value: 3 },
        { text: 'Yellow', value: 4 },
        { text: 'Purple', value: 5 },
        { text: 'Gray', value: 6 },
    ];

    return `<div>
        <Dropdown :data="self.data" :value="1" />
    </div>`;
}
```

Quick example with React

```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 },
    { text: 'Blue', value: 2 },
    { text: 'Green', value: 3 },
    { text: 'Yellow', value: 4 },
    { text: 'Purple', value: 5 },
    { text: 'Gray', value: 6 },
];
export default function App() {
    const dropdown = useRef();
    return (
        <div>
            <Dropdown data={data} ref={dropdown} value={1} />
        </div>
    );
}
```

Quick example with Vue

```vue
<template>
    <Dropdown :data="data" :value="1" />
</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 },
                { text: 'Blue', value: 2 },
                { text: 'Green', value: 3 },
                { text: 'Yellow', value: 4 },
                { text: 'Purple', value: 5 },
                { text: 'Gray', value: 6 },
            ],
        };
    },
};
</script>
```

### 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.                                                                            |

### Item Details

| Attribute                | Description                                                                                 |
| ------------------------ | ------------------------------------------------------------------------------------------- |
| value?: number or 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.                               |
| synonyms?: 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.                                       |

## License

The [LemonadeJS](https://lemonadejs.net) LemonadeJS Dropdown is released under the MIT.

## Other Tools

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet Data Grid](https://jspreadsheet.com)

---
_Source: https://npm.io/package/@lemonadejs/dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._