# styled-dropdown

> Styled Dropdown is a user-friendly, pre-styled dropdown component for your web applications. It injects styles directly into the DOM, eliminating the need to import any separate CSS files.

Latest version **1.0.1** (published 2023-07-05) · 0 weekly downloads

## Install

```sh
npm install styled-dropdown
pnpm add styled-dropdown
yarn add styled-dropdown
bun add styled-dropdown
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-07-05 |
| First published | 2023-07-05 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 3.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | stove-jeebs |

## Links

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

## Recent versions

- 1.0.1 (latest) — 2023-07-05
- 1.0.0 — 2023-07-05
- 0.0.0 — 2023-07-05

## README

# Styled Dropdown

Styled Dropdown is a user-friendly, pre-styled dropdown component for your web applications. It injects styles directly into the DOM, eliminating the need to import any separate CSS files.

## Features

- Easy to install and use.
- Pre-styled, no need to import styles separately.
- Pure JavaScript, no dependencies.

## Installation

Install `styled-dropdown` via npm:

```bash
npm install styled-dropdown
```

## Usage

To use the styled-dropdown component in your project, follow the example below:

- add div with dropdown id to your html page

```html
<div id="dropdown"></div>
```

- import styledDropdown into your Javascript code

```js
import styledDropdown from 'styledDropdown';
```

- and the code below

```js
createStyledDropdown("dropdown", [
	{ href: "#", label: "Link 1" },
	{ href: "#", label: "Link 2" },
	{ href: "#", label: "Link 3" },
]);
```

In this example:

- 'dropdown' is the id of the HTML element where the dropdown menu will be rendered.

- The array provides the options for the dropdown menu. Each option is an object with two properties: href and label. href is the link to be used when this option is selected. label is the text to be displayed for this option in the dropdown menu.

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